@jirawatpyk/aura-react 5.61.0 → 5.63.0

package/README.md

@@ -186,6 +186,15 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.63 — Chamber-OS addendum 79 (#178)
+
+- **A lazy chip still makes `meta` the chip row:** a Server Component's Badge or StatusPill passed through a `'use client'` wrapper can arrive as a lazy node on Next's dev server. PageHeader now looks through a resolved lazy node (a chip makes the row, text keeps the line, as when it arrives resolved), and an unresolved one is neutral — the other children decide — so the layout no longer depends on the build mode. Anything else unresolved (a promise, an iterator) keeps a line.
+- **`metaLayout`:** `"row"` lays `meta` out as the wrapping chip row whatever it holds, `"line"` as a text line; `"auto"` (default) keeps 5.62's guess (elements only → row). Pass `metaLayout="row"` where chips come from a Server Component, so nothing is guessed (an all-lazy meta that hasn't resolved would otherwise be a line). Also from `/server`. Drop the `flex flex-wrap items-center gap-2` stand-in.
+
+## 5.62 — Chamber-OS addendum 78 (#177)
+
+- **PageHeader `meta` lays chips out as a row:** a `meta` made only of elements (Badges, a StatusPill — through Fragments and arrays) is now a wrapping row, 8px apart and vertically centred, as `eyebrow` — so chips no longer touch when the JSX has no space between them, and they wrap on a phone. Any text in it — a string `meta` ("128 members · updated 3 min ago"), or a sentence with a `<strong>`, `<time>`, a link or `{count}` — keeps it a text line, as before. Also from `/server`. Drop a `flex flex-wrap items-center gap-2` stand-in wrapper.
+
 ## 5.61 — Chamber-OS addendum 77 (#176)
 
 - **A visually hidden child of full-width header actions stays hidden:** below the `actionsFullWidthBelow` width every direct child of PageHeader's actions took a share of the row with `min-width: max-content` — including a visually hidden description beside a button (`aria-describedby` → a `.sr-only` / `.aura-sr-only` span), which grew to its text's width and scrolled the page sideways. The share rule — here and in the `actionsBarBelow` bar — now skips a visually hidden child: `.sr-only`, `.aura-sr-only`, `.visually-hidden`, `.screen-reader-text`, `[hidden]`, or one with an inline `position: absolute` (Radix and React Aria `VisuallyHidden`); the buttons share the row as before. Drop a `.sr-only { min-width: 0 }` stand-in. Another out-of-flow child styled by a class of your own (an absolutely positioned badge) needs `min-width: 0`, or put it inside the button.

package/dist/aura.bundle.js

@@ -7914,6 +7914,33 @@ window.Aura = (() => {
   // src/PageHeader.tsx
   var React43 = __toESM(require_react(), 1);
   var h8 = React43.createElement;
+  var LAZY = Symbol.for("react.lazy");
+  function chipsOnly(node) {
+    let el = 0;
+    const walk = function(n3) {
+      if (n3 == null || typeof n3 === "boolean") return true;
+      if (typeof n3 === "string") return n3.trim() === "";
+      if (typeof n3 === "number" || typeof n3 === "bigint") return false;
+      if (Array.isArray(n3)) return n3.every(walk);
+      if (typeof n3 === "object" && n3.$$typeof === LAZY) {
+        const lazy = n3;
+        let value;
+        try {
+          value = lazy._init(lazy._payload);
+        } catch {
+          return true;
+        }
+        return walk(value);
+      }
+      if (React43.isValidElement(n3)) {
+        if (n3.type === React43.Fragment) return walk(n3.props.children);
+        el++;
+        return true;
+      }
+      return false;
+    };
+    return walk(node) && el > 0;
+  }
   var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
     const attrs2 = {};
     Object.keys(props).forEach(function(k) {
@@ -7930,6 +7957,7 @@ window.Aura = (() => {
     const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
     const eyebrow = props.eyebrow;
     const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
+    const richMeta = props.metaLayout === "row" ? true : props.metaLayout === "line" ? false : chipsOnly(props.meta);
     const heading = h8(
       "h" + level,
       {
@@ -7971,7 +7999,7 @@ window.Aura = (() => {
           h8("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
         ) : heading,
         shown(props.subtitle) ? h8("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
-        props.meta != null && props.meta !== false ? h8("div", { className: "aura-page-header__meta" }, props.meta) : null
+        props.meta != null && props.meta !== false ? h8("div", { className: cx("aura-page-header__meta", richMeta && "aura-page-header__meta--rich") }, props.meta) : null
       ),
       props.actions != null && props.actions !== false ? h8(
         "div",

package/dist/cjs/index.cjs

@@ -7896,6 +7896,33 @@ var React44 = __toESM(require("react"), 1);
 // src/PageHeader.tsx
 var React43 = __toESM(require("react"), 1);
 var h8 = React43.createElement;
+var LAZY = Symbol.for("react.lazy");
+function chipsOnly(node) {
+  let el = 0;
+  const walk = function(n3) {
+    if (n3 == null || typeof n3 === "boolean") return true;
+    if (typeof n3 === "string") return n3.trim() === "";
+    if (typeof n3 === "number" || typeof n3 === "bigint") return false;
+    if (Array.isArray(n3)) return n3.every(walk);
+    if (typeof n3 === "object" && n3.$$typeof === LAZY) {
+      const lazy = n3;
+      let value;
+      try {
+        value = lazy._init(lazy._payload);
+      } catch {
+        return true;
+      }
+      return walk(value);
+    }
+    if (React43.isValidElement(n3)) {
+      if (n3.type === React43.Fragment) return walk(n3.props.children);
+      el++;
+      return true;
+    }
+    return false;
+  };
+  return walk(node) && el > 0;
+}
 var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
   const attrs2 = {};
   Object.keys(props).forEach(function(k) {
@@ -7912,6 +7939,7 @@ var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
+  const richMeta = props.metaLayout === "row" ? true : props.metaLayout === "line" ? false : chipsOnly(props.meta);
   const heading = h8(
     "h" + level,
     {
@@ -7953,7 +7981,7 @@ var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
         h8("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
       ) : heading,
       shown(props.subtitle) ? h8("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
-      props.meta != null && props.meta !== false ? h8("div", { className: "aura-page-header__meta" }, props.meta) : null
+      props.meta != null && props.meta !== false ? h8("div", { className: cx("aura-page-header__meta", richMeta && "aura-page-header__meta--rich") }, props.meta) : null
     ),
     props.actions != null && props.actions !== false ? h8(
       "div",

package/dist/esm/PageHeader.js

@@ -2,6 +2,33 @@
 import * as React from "react";
 import { cx } from "./classes.js";
 const h = React.createElement;
+const LAZY = Symbol.for("react.lazy");
+function chipsOnly(node) {
+  let el = 0;
+  const walk = function(n) {
+    if (n == null || typeof n === "boolean") return true;
+    if (typeof n === "string") return n.trim() === "";
+    if (typeof n === "number" || typeof n === "bigint") return false;
+    if (Array.isArray(n)) return n.every(walk);
+    if (typeof n === "object" && n.$$typeof === LAZY) {
+      const lazy = n;
+      let value;
+      try {
+        value = lazy._init(lazy._payload);
+      } catch {
+        return true;
+      }
+      return walk(value);
+    }
+    if (React.isValidElement(n)) {
+      if (n.type === React.Fragment) return walk(n.props.children);
+      el++;
+      return true;
+    }
+    return false;
+  };
+  return walk(node) && el > 0;
+}
 const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
   const attrs = {};
   Object.keys(props).forEach(function(k) {
@@ -18,6 +45,7 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
+  const richMeta = props.metaLayout === "row" ? true : props.metaLayout === "line" ? false : chipsOnly(props.meta);
   const heading = h(
     "h" + level,
     {
@@ -59,7 +87,7 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
         h("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
       ) : heading,
       shown(props.subtitle) ? h("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
-      props.meta != null && props.meta !== false ? h("div", { className: "aura-page-header__meta" }, props.meta) : null
+      props.meta != null && props.meta !== false ? h("div", { className: cx("aura-page-header__meta", richMeta && "aura-page-header__meta--rich") }, props.meta) : null
     ),
     props.actions != null && props.actions !== false ? h(
       "div",

package/dist/index.d.cts

@@ -2072,8 +2072,13 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** 5.46: `end` (default) lines the actions up with the bottom of the text; `start` with its top (the title, when
 	 * there is no breadcrumb or eyebrow). */
 	actionsAlign?: "end" | "start" | undefined;
-	/** A line under the title — counts, last update, owner. */
+	/** A line under the title — counts, last update, owner. 5.62 (Chamber-OS 177): made only of elements (Badges, a
+	 * StatusPill), it is laid out as a wrapping row, 8px apart; any text in it keeps it a line. */
 	meta?: React$1.ReactNode | undefined;
+	/** 5.63 (Chamber-OS 178): `row` lays `meta` out as the wrapping chip row whatever its children are, `line` as a text
+	 * line; `auto` (default) guesses from them (elements only → row). Pass `row` when chips come from a Server Component
+	 * through a client wrapper, where they may arrive unresolved. */
+	metaLayout?: "auto" | "row" | "line" | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
 	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole

package/dist/index.d.ts

@@ -2072,8 +2072,13 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** 5.46: `end` (default) lines the actions up with the bottom of the text; `start` with its top (the title, when
 	 * there is no breadcrumb or eyebrow). */
 	actionsAlign?: "end" | "start" | undefined;
-	/** A line under the title — counts, last update, owner. */
+	/** A line under the title — counts, last update, owner. 5.62 (Chamber-OS 177): made only of elements (Badges, a
+	 * StatusPill), it is laid out as a wrapping row, 8px apart; any text in it keeps it a line. */
 	meta?: React$1.ReactNode | undefined;
+	/** 5.63 (Chamber-OS 178): `row` lays `meta` out as the wrapping chip row whatever its children are, `line` as a text
+	 * line; `auto` (default) guesses from them (elements only → row). Pass `row` when chips come from a Server Component
+	 * through a client wrapper, where they may arrive unresolved. */
+	metaLayout?: "auto" | "row" | "line" | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
 	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole

package/dist/server/index.cjs

@@ -1632,6 +1632,33 @@ function TableSkeleton(props) {
 // src/PageHeader.tsx
 var React6 = __toESM(require("react"), 1);
 var h5 = React6.createElement;
+var LAZY = Symbol.for("react.lazy");
+function chipsOnly(node) {
+  let el = 0;
+  const walk = function(n3) {
+    if (n3 == null || typeof n3 === "boolean") return true;
+    if (typeof n3 === "string") return n3.trim() === "";
+    if (typeof n3 === "number" || typeof n3 === "bigint") return false;
+    if (Array.isArray(n3)) return n3.every(walk);
+    if (typeof n3 === "object" && n3.$$typeof === LAZY) {
+      const lazy = n3;
+      let value;
+      try {
+        value = lazy._init(lazy._payload);
+      } catch {
+        return true;
+      }
+      return walk(value);
+    }
+    if (React6.isValidElement(n3)) {
+      if (n3.type === React6.Fragment) return walk(n3.props.children);
+      el++;
+      return true;
+    }
+    return false;
+  };
+  return walk(node) && el > 0;
+}
 var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
   const attrs2 = {};
   Object.keys(props).forEach(function(k) {
@@ -1648,6 +1675,7 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
+  const richMeta = props.metaLayout === "row" ? true : props.metaLayout === "line" ? false : chipsOnly(props.meta);
   const heading = h5(
     "h" + level,
     {
@@ -1689,7 +1717,7 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
         h5("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
       ) : heading,
       shown(props.subtitle) ? h5("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
-      props.meta != null && props.meta !== false ? h5("div", { className: "aura-page-header__meta" }, props.meta) : null
+      props.meta != null && props.meta !== false ? h5("div", { className: cx("aura-page-header__meta", richMeta && "aura-page-header__meta--rich") }, props.meta) : null
     ),
     props.actions != null && props.actions !== false ? h5(
       "div",

package/dist/server/index.d.cts

@@ -582,8 +582,13 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** 5.46: `end` (default) lines the actions up with the bottom of the text; `start` with its top (the title, when
 	 * there is no breadcrumb or eyebrow). */
 	actionsAlign?: "end" | "start" | undefined;
-	/** A line under the title — counts, last update, owner. */
+	/** A line under the title — counts, last update, owner. 5.62 (Chamber-OS 177): made only of elements (Badges, a
+	 * StatusPill), it is laid out as a wrapping row, 8px apart; any text in it keeps it a line. */
 	meta?: React$1.ReactNode | undefined;
+	/** 5.63 (Chamber-OS 178): `row` lays `meta` out as the wrapping chip row whatever its children are, `line` as a text
+	 * line; `auto` (default) guesses from them (elements only → row). Pass `row` when chips come from a Server Component
+	 * through a client wrapper, where they may arrive unresolved. */
+	metaLayout?: "auto" | "row" | "line" | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
 	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole

package/dist/server/index.d.ts

@@ -582,8 +582,13 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** 5.46: `end` (default) lines the actions up with the bottom of the text; `start` with its top (the title, when
 	 * there is no breadcrumb or eyebrow). */
 	actionsAlign?: "end" | "start" | undefined;
-	/** A line under the title — counts, last update, owner. */
+	/** A line under the title — counts, last update, owner. 5.62 (Chamber-OS 177): made only of elements (Badges, a
+	 * StatusPill), it is laid out as a wrapping row, 8px apart; any text in it keeps it a line. */
 	meta?: React$1.ReactNode | undefined;
+	/** 5.63 (Chamber-OS 178): `row` lays `meta` out as the wrapping chip row whatever its children are, `line` as a text
+	 * line; `auto` (default) guesses from them (elements only → row). Pass `row` when chips come from a Server Component
+	 * through a client wrapper, where they may arrive unresolved. */
+	metaLayout?: "auto" | "row" | "line" | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;
 	/** 5.37 (DxT Monitor #17): below this breakpoint (`sm` 640px, `md` 768px, `lg` 1024px) the actions take the whole

package/dist/server/index.js

@@ -1566,6 +1566,33 @@ function TableSkeleton(props) {
 // src/PageHeader.tsx
 import * as React6 from "react";
 var h5 = React6.createElement;
+var LAZY = Symbol.for("react.lazy");
+function chipsOnly(node) {
+  let el = 0;
+  const walk = function(n3) {
+    if (n3 == null || typeof n3 === "boolean") return true;
+    if (typeof n3 === "string") return n3.trim() === "";
+    if (typeof n3 === "number" || typeof n3 === "bigint") return false;
+    if (Array.isArray(n3)) return n3.every(walk);
+    if (typeof n3 === "object" && n3.$$typeof === LAZY) {
+      const lazy = n3;
+      let value;
+      try {
+        value = lazy._init(lazy._payload);
+      } catch {
+        return true;
+      }
+      return walk(value);
+    }
+    if (React6.isValidElement(n3)) {
+      if (n3.type === React6.Fragment) return walk(n3.props.children);
+      el++;
+      return true;
+    }
+    return false;
+  };
+  return walk(node) && el > 0;
+}
 var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
   const attrs2 = {};
   Object.keys(props).forEach(function(k) {
@@ -1582,6 +1609,7 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
+  const richMeta = props.metaLayout === "row" ? true : props.metaLayout === "line" ? false : chipsOnly(props.meta);
   const heading = h5(
     "h" + level,
     {
@@ -1623,7 +1651,7 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
         h5("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
       ) : heading,
       shown(props.subtitle) ? h5("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
-      props.meta != null && props.meta !== false ? h5("div", { className: "aura-page-header__meta" }, props.meta) : null
+      props.meta != null && props.meta !== false ? h5("div", { className: cx("aura-page-header__meta", richMeta && "aura-page-header__meta--rich") }, props.meta) : null
     ),
     props.actions != null && props.actions !== false ? h5(
       "div",

package/dist/styles.css

@@ -1365,6 +1365,8 @@ summary.aura-link::-webkit-details-marker { display: none; }
 .aura-page-header__title-row > .aura-page-header__title { min-width: 0; }
 .aura-page-header__title-addon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); min-width: 0; }
 .aura-page-header__eyebrow--rich { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); font-family: var(--font-sans); line-height: 1.5; }
+/* 5.62 (Chamber-OS 177): a meta of chips only (no text) is a wrapping row, as the eyebrow — 8px apart, 4px under the title. */
+.aura-page-header__meta--rich { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
 .aura-page-header--hero, .aura-page-header--hero-lg { padding-top: var(--aura-page-header-hero-space, var(--aura-space-4)); }
 .aura-page-header--hero .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(30px, 1.875rem)); line-height: var(--aura-page-header-title-line-height, 1.2); }
 /* 5.47 (Chamber-OS 152): compact — the staff boards' 26 / 32; hero steps to 36px from 1024px like hero-lg. */

package/dist/styles.layer.css

@@ -1367,6 +1367,8 @@ summary.aura-link::-webkit-details-marker { display: none; }
 .aura-page-header__title-row > .aura-page-header__title { min-width: 0; }
 .aura-page-header__title-addon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); min-width: 0; }
 .aura-page-header__eyebrow--rich { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); font-family: var(--font-sans); line-height: 1.5; }
+/* 5.62 (Chamber-OS 177): a meta of chips only (no text) is a wrapping row, as the eyebrow — 8px apart, 4px under the title. */
+.aura-page-header__meta--rich { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
 .aura-page-header--hero, .aura-page-header--hero-lg { padding-top: var(--aura-page-header-hero-space, var(--aura-space-4)); }
 .aura-page-header--hero .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(30px, 1.875rem)); line-height: var(--aura-page-header-title-line-height, 1.2); }
 /* 5.47 (Chamber-OS 152): compact — the staff boards' 26 / 32; hero steps to 36px from 1024px like hero-lg. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.61.0",
+  "version": "5.63.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",