@gemboss/ui 0.7.2 → 0.8.1

package/src/page.tsx

@@ -0,0 +1,35 @@
+/**
+ * How wide a page's content may grow right of the rail (0.8.1). The admin's tiers, same numbers:
+ *   default → `--ui-content-max` (900px): lists, tables, card grids, dashboards. Admin `.gemboss-w-gallery` / `-dashboard`.
+ *   feed    → 720px: something read top to bottom (activity, a log, a timeline). Admin `.gemboss-w-feed`.
+ *   form    → 662px: one column of fields (settings). Admin `.gemboss-w-form`, Polaris' narrowWidth.
+ *   canvas  → 1440px: content that is WIDER than a column of text and was measured to need it (a horizontal path,
+ *             a wide comparison table). Admin `.gemboss-w-canvas`.
+ *   full    → no cap: a board or an editor that is the whole screen. Say why at the call site.
+ * The CSS is `.ui-page` + `.ui-page--<tier>` in app-shell.css; HTML surfaces write the class themselves.
+ *
+ * Its OWN module, not shell.tsx, and not "use client": the admin imports Shell / ShellMain / Rail* from shell.tsx, a
+ * client module the bundler keeps whole, and its first-load shell budget had 0.0 KB of room (240.0 / 240, 04/10/2026).
+ * In shell.tsx this code reached the admin's first load; here nothing the admin imports pulls it in. No state, so a
+ * server component can render it too.
+ */
+import React from "react";
+
+export type PageWidth = "default" | "feed" | "form" | "canvas" | "full";
+
+/** `ui-page` plus the tier's modifier: for a surface that renders the wrapper itself (a server template). */
+export function pageWidthClass(width: PageWidth = "default"): string {
+  return width === "default" ? "ui-page" : `ui-page ui-page--${width}`;
+}
+
+/**
+ * `div.ui-page`: the content column, capped at `width`'s tier and centred in the space right of the rail. Put ONE
+ * directly inside `AppShell`, with the CURRENT route's tier, so every screen is capped in one place:
+ * `<AppShell …><PageContainer width={route === "settings" ? "form" : "default"}>{page}</PageContainer></AppShell>`.
+ * A page cannot widen a cap its parent set, so do not nest a second one to get `canvas` or `full`.
+ */
+export function PageContainer({ as: Comp = "div", width = "default", className, children, ...rest }:
+  { as?: React.ElementType; width?: PageWidth; className?: string; children?: React.ReactNode }
+  & Omit<React.HTMLAttributes<HTMLElement>, "className" | "children">) {
+  return <Comp className={className ? `${pageWidthClass(width)} ${className}` : pageWidthClass(width)} {...rest}>{children}</Comp>;
+}

package/src/ui.css

@@ -274,10 +274,11 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 
 /* ── Modal ────────────────────────────────────────────────────────────────────
    Rendered INLINE (not portaled): a portal escapes the .gemboss-admin-shell token
-   scope and would render light. Kept in-tree so --ui-* resolves to the surface. */
+   scope and would render light. Kept in-tree so --ui-* resolves to the surface.
+   0.7.3: Polaris Modal's density (#1099, README "Popup density"). Popup only: --ui-control-h stays 32. */
 .ui-overlay {
   position: fixed; inset: 0; z-index: 500;
-  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px);
+  background: rgba(0, 0, 0, 0.5);
   display: grid; place-items: center; padding: 20px;
 }
 .ui-modal {
@@ -287,30 +288,39 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 }
 /* Head = title + the one close button every modal used to draw for itself. */
 .ui-modal__head {
-  display: flex; align-items: flex-start; gap: 16px;
-  padding: 16px 20px; border-bottom: 1px solid var(--ui-border);
-  font-size: 15px; font-weight: 620; color: var(--ui-text);
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 16px; border-bottom: 1px solid var(--ui-border);
+  font-size: 14px; line-height: 20px; font-weight: 650; color: var(--ui-text);
 }
 .ui-modal__title { min-width: 0; flex: 1 1 auto; }
 .ui-modal__close {
   flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
-  width: 44px; height: 44px; margin: -8px -8px -8px 0;   /* a 44px target that does not grow the head */
+  width: 28px; height: 28px; padding: 0;
   border: 0; border-radius: var(--ui-radius-md, 8px); background: transparent;
   color: var(--ui-text-muted); cursor: pointer;
 }
 .ui-modal__close svg { width: 20px; height: 20px; }
 .ui-modal__close:hover { background: var(--ui-surface-2); color: var(--ui-text); }
 .ui-modal__close:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+/* Here, not in kit-plain.css: the admin loads only this file (0.7.3). */
+.ui-modal__body { padding: 16px; }
+.ui-modal__foot {
+  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
+  padding: 12px 16px; border-top: 1px solid var(--ui-border);
+}
+:is(.ui-modal__head, .ui-modal__foot) .ui-btn { height: 28px; padding: 0 12px; font-size: var(--ui-fs-caption); }
+/* 44px under a thumb or at phone width; -8px keeps the head 53. */
+@media (pointer: coarse), (max-width: 47.9975em) {
+  .ui-modal__close { width: 44px; height: 44px; margin: -8px -8px -8px 0; }
+  :is(.ui-modal__head, .ui-modal__foot) .ui-btn { min-height: 44px; }
+}
 
-/* `size="lg"` — the screen-shaped dialog. Only the HOOK lives here: this sheet is imported by the
-   root layout, so every rule in it is paid on every screen, and the geometry of a dialog with one
-   consumer belongs in that consumer's chunk (see SettingsDialog.module.css). */
+/* `size="lg"`: only the HOOK here (this sheet is paid on every screen); its geometry is in
+   SettingsDialog.module.css, the one consumer's chunk. */
 .ui-modal--lg { position: relative; }
 
-/* The kit's multi-line field joins the ONE field family (01/10/2026, Chris: "form control đồng bộ"):
-   same input-border token, hover and focus ring as `gemboss-field` and `.ui-select`. Before, it drew a
-   lighter --ui-border box at 14px with no focus ring, so on GemFactory's compose form a textarea sat
-   beside selects of a darker border and text fields of a third look (measured on prod). */
+/* The kit's multi-line field is the ONE field family (01/10/2026, Chris: "form control đồng bộ"): same
+   border token, hover and focus ring as `gemboss-field` / `.ui-select` (it drew a third look on GemFactory). */
 .ui-textarea {
   width: 100%; min-height: 96px; resize: vertical; box-sizing: border-box;
   background: var(--p-color-input-bg-surface, var(--gemboss-field-bg));