@nextlyhq/ui 0.0.2-alpha.60 → 0.0.2-alpha.62

package/dist/theme.css

@@ -900,6 +900,39 @@
   --nx-field-half: 380px;
   --nx-field-full: 760px;
 
+  /* Page shell — the inset from the content panel's edge to the page's content,
+   * and the measure that content is bounded to. `PageShell` spends these as
+   * GRID COLUMNS rather than as padding, because padding cannot be cancelled by
+   * a descendant: that is why full-bleed content previously had to be rendered
+   * OUTSIDE the wrapper to escape the measure, and why two wrappers each
+   * applying their own inset silently doubled it.
+   *
+   * A length rather than a colour, so it is declared once here rather than per
+   * light/dark block — a page's inset does not change with the theme. */
+  --nx-gutter: 2rem;
+  --nx-measure-form: 56rem;
+  --nx-measure-wide: 72rem;
+
+  /* The measure the content column is bounded to, declared here so a theme can
+   * retune it centrally and so the token resolves to a real value rather than
+   * to a `var()` fallback. `PageShell` overrides it INLINE per its `width`
+   * prop, which is what makes the three widths one grid template instead of
+   * three near-identical ones; this declaration is the value that applies when
+   * the grid is used without that component. */
+  --nx-shell-measure: var(--nx-measure-form);
+
+  /* The single vertical-rhythm token for a form section. `FormSection` applies
+   * it to every DIRECT child, so the card's top and bottom breathing room and
+   * the gap between two fields are one decision and cannot drift apart — the
+   * first child's top padding IS the card's top inset.
+   *
+   * The rhythm belongs to the section rather than to the rows it is handed. A
+   * section renders whatever children it is given, and cannot tell one row
+   * idiom from another; leaving each row to supply its own vertical padding
+   * makes the card's inset depend on which idiom the caller happened to reach
+   * for, and a row that supplies none renders flush against the borders. */
+  --nx-field-gap: 1.25rem;
+
   /* Focus ring colors */
   --nx-focus-ring: var(--nx-primary);
   --nx-focus-ring-offset: oklch(1 0 0);
@@ -1115,3 +1148,102 @@
   --nx-table-border: var(--nx-border);
   /* inherit the retuned white-alpha border (was a fixed faint slate) */
 }
+
+/* ============================================================
+ * Page shell
+ * ============================================================
+ *
+ * The gutter and the measure are ONE grid definition, spent as columns rather
+ * than as padding. That is load-bearing rather than stylistic:
+ *
+ *  - Padding cannot be cancelled by a descendant, so a block that must run
+ *    edge-to-edge previously had to be rendered OUTSIDE the wrapper imposing
+ *    the measure. `.nx-bleed` turns that from an accident into a declaration.
+ *  - Two wrappers that each apply an inset silently add. As columns there is
+ *    one declaration, so double-padding is unrepresentable rather than merely
+ *    discouraged.
+ *  - Every direct child defaults to the `content` column, so a page header and
+ *    the card beneath it cannot disagree about their left edge.
+ *
+ * Centring comes from the two outer tracks being equal rather than from
+ * `margin-inline: auto` on a max-width box, which does nothing at panel widths
+ * where the cap does not bind.
+ */
+@layer components {
+  /* A form section's vertical rhythm, applied to every DIRECT child.
+   *
+   * Plain CSS rather than a Tailwind utility on the element, for two reasons.
+   * The parenthesised custom-property shorthand is v4-only, so the same class
+   * compiles to a rule under one Tailwind major and to nothing under the other,
+   * and the section renders flush wherever it compiles to nothing — silently,
+   * because the markup is identical either way. And an arbitrary-value token is
+   * EXTRACTED from any file the scanner reads, a comment or a test string
+   * included, so merely naming one of these utilities in prose emits its rule;
+   * a malformed spelling anywhere in the repository fails the whole stylesheet.
+   *
+   * A rule shipped in the theme has neither property: it is the same CSS under
+   * both majors, and there is no token for a scanner to find.
+   *
+   * Children must not pad themselves. The two paddings are additive, so a row
+   * carrying its own `py-*` doubles the rhythm on the sections that are already
+   * correct. */
+  .nx-form-section-rows > * {
+    padding-block: var(--nx-field-gap);
+  }
+
+  .nx-page-shell {
+    display: grid;
+    /* The outer tracks are `minmax(gutter, 1fr)` rather than a fixed gutter so
+     * the grid always spans its container: a fixed pair would total only
+     * `measure + 2 * gutter`, leaving `full-start`/`full-end` short of the
+     * panel's edges in anything wider, and a `Bleed` child short with them. The
+     * `1fr` maximum absorbs the surplus while `gutter` holds as the minimum.
+     *
+     * Their being equal is also what centres the content column, so no
+     * `justify-content` is declared: with flexible tracks the grid fills its
+     * container and there is no free space for it to distribute. */
+    grid-template-columns:
+      [full-start] minmax(var(--nx-gutter), 1fr)
+      [content-start] minmax(0, var(--nx-shell-measure))
+      [content-end] minmax(var(--nx-gutter), 1fr)
+      [full-end];
+    align-content: start;
+  }
+
+  /* `min-width: 0` because a grid item's default `min-width: auto` refuses to
+   * shrink below its content, which lets one wide descendant — a long code
+   * string, a table — push the column past the measure it was given. */
+  .nx-page-shell > * {
+    grid-column: content;
+    min-width: 0;
+  }
+
+  /* Scoped to a DIRECT child: the named lines exist on this grid alone, so a
+   * `.nx-bleed` nested deeper resolves against a grid that never declared them.
+   * Writing the rule this way means such a case is inert rather than
+   * mysteriously half-working. */
+  .nx-page-shell > .nx-bleed {
+    grid-column: full;
+  }
+}
+
+/* The gutter steps with the content PANEL rather than the viewport: the panel's
+ * width changes when a sidebar opens, and the panel is what the page sits in.
+ * `content` is the container the admin's <main> already names. The step values
+ * match Payload's --gutter-h ladder (32 / 24 / 16).
+ *
+ * The override lands on `.nx-page-shell`, a DESCENDANT of that container. A
+ * container query styles only elements inside its container, so a rule naming
+ * `:root` or `.nextly-admin` — both ancestors of the `<main>` that declares it —
+ * never matches, and the gutter keeps its widest value at every panel size. */
+@container content (max-width: 1024px) {
+  .nx-page-shell {
+    --nx-gutter: 1.5rem;
+  }
+}
+
+@container content (max-width: 768px) {
+  .nx-page-shell {
+    --nx-gutter: 1rem;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextlyhq/ui",
-  "version": "0.0.2-alpha.60",
+  "version": "0.0.2-alpha.62",
   "description": "Nextly UI — Reusable React component library for Nextly plugins and custom admin UIs",
   "license": "MIT",
   "keywords": [
@@ -100,10 +100,10 @@
     "typescript": "^5.9.3",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^4.1.0",
-    "@nextlyhq/admin-css": "0.0.2-alpha.60",
-    "@nextlyhq/module-specifiers": "0.0.2-alpha.60",
-    "@nextlyhq/eslint-config": "0.0.2-alpha.60",
-    "@nextlyhq/tsconfig": "0.0.2-alpha.60"
+    "@nextlyhq/admin-css": "0.0.2-alpha.62",
+    "@nextlyhq/eslint-config": "0.0.2-alpha.62",
+    "@nextlyhq/module-specifiers": "0.0.2-alpha.62",
+    "@nextlyhq/tsconfig": "0.0.2-alpha.62"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
@@ -151,6 +151,7 @@
     "build": "pnpm build:js && node scripts/build-css.mjs",
     "build:js": "rimraf dist && tsup && tsup --config tsup.server-safe.config.ts && tsx scripts/check-client-directive.ts && tsx scripts/check-server-safe-artifacts.ts",
     "build:css": "node scripts/build-css.mjs",
+    "build:surface-declarations": "tsx scripts/build-surface-declarations.ts",
     "dev": "node scripts/dev.mjs",
     "check-types": "tsc --noEmit && tsc --noEmit -p tsconfig.tests.json",
     "lint": "eslint . --max-warnings 0",