@jirawatpyk/aura-react 5.30.0 → 5.32.0

package/dist/index.d.cts

@@ -344,7 +344,8 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 	icon: IconInput;
 	/** `danger` colours the icon and hover for a destructive action (Delete, Revoke). */
 	tone?: "neutral" | "danger" | undefined;
-	/** Accessible name and tooltip (required). */
+	/** Accessible name and tooltip (required). Since 5.32 the tooltip is AURA's own (hover and keyboard focus), not a
+	 * native `title`; pass `title` yourself to keep a native one instead. */
 	label: string;
 	/** Icon size. Default `sm` (16). */
 	size?: "sm" | "md" | undefined;
@@ -415,6 +416,13 @@ export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttrib
 	icon?: IconInput | undefined;
 	/** Trailing unit, e.g. "THB". */
 	suffix?: React$1.ReactNode | undefined;
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the box — e.g. the phrase to type, with a copy
+	 * button, on a typed confirmation. The hint and error stay below. Its box's id (`{id}-addon`) comes first in the
+	 * input's `aria-describedby`, so its text is read after the label; keep any button names in it short. */
+	labelAddon?: React$1.ReactNode | undefined;
+	/** `false` keeps the addon out of `aria-describedby` — for one that isn't a description (a "Forgot password?"
+	 * link), or to name only part of it: give that part an id and pass it in `aria-describedby`. Default `true`. */
+	labelAddonDescribes?: boolean | undefined;
 	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
 	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
 	 * Default: the density's input height. */
@@ -540,6 +548,13 @@ export interface CommandProps {
 	className?: string | undefined;
 }
 export interface TextareaProps extends FieldProps, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the box — e.g. the phrase to type, with a copy
+	 * button, on a typed confirmation. The hint and error stay below. Its box's id (`{id}-addon`) comes first in the
+	 * input's `aria-describedby`, so its text is read after the label; keep any button names in it short. */
+	labelAddon?: React$1.ReactNode | undefined;
+	/** `false` keeps the addon out of `aria-describedby` — for one that isn't a description (a "Forgot password?"
+	 * link), or to name only part of it: give that part an id and pass it in `aria-describedby`. Default `true`. */
+	labelAddonDescribes?: boolean | undefined;
 	/** Accepted like the other fields' (5.30, Chamber-OS 135), so a form can pass it to every field. A Textarea is
 	 * always at least 96px tall, well over the 44px target, so it changes nothing you can see. */
 	touchHeight?: TouchHeight | undefined;
@@ -814,6 +829,10 @@ export interface SideNavProps {
 	defaultValue?: string | undefined;
 	onChange?: ((id: string) => void) | undefined;
 	header?: React$1.ReactNode | undefined;
+	/** 5.32 (DxT Monitor request 1): a full-width 1px aura-border-default line under `header`, with the board's metrics:
+	 * the header at least 72px tall with its content 20px from the top and start, the line at its foot, and 16px
+	 * before the first item. Default `false`. */
+	headerDivider?: boolean | undefined;
 	footer?: React$1.ReactNode | undefined;
 	/** Default "Main". */
 	label?: string | undefined;
@@ -1200,7 +1219,9 @@ export interface AppShellProps {
 	/** A BottomNav for phones (4.19). Shown below its `hideFrom` breakpoint; the content keeps room for it, and a
 	 * viewport ActionBar sits on top of it. With a `bottomNav` and no `nav`, there is no menu button. */
 	bottomNav?: React$1.ReactElement | undefined;
-	/** `false` (5.14): `<main>` has no padding, for pages whose containers own the page padding and column. */
+	/** The content padding is the page margin: 16px at the sides and 24px top and bottom on phones, 24px from 640px,
+	 * 32px from 1024px. Pages don't add their own (a PageHeader has none, 5.32). `false` (5.14): `<main>` has no
+	 * padding, for pages whose containers own the page padding and column. */
 	contentPadding?: boolean | undefined;
 	className?: string | undefined;
 }
@@ -1324,7 +1345,8 @@ export interface BottomNavItem {
 	/** Read after the label when `badge` is set, e.g. "new". */
 	badgeLabel?: string | undefined;
 	/** The full name for screen readers when `label` is shortened to fit (5.7), e.g. label "Konto", ariaLabel
-	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3). The count or badge is still appended. */
+	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3); a dev warning says when it doesn't (5.32). The count or badge is
+	 * still appended. */
 	ariaLabel?: string | undefined;
 }
 export interface BottomNavProps {
@@ -1476,7 +1498,10 @@ export interface ProgressProps {
 	className?: string | undefined;
 }
 export interface SkeletonProps {
-	variant?: "text" | "rect" | "circle" | undefined;
+	/** 5.32 (DxT Monitor request 4): `pill` is a StatusPill's size (20px tall, 22px under `lang="th"`, 72px wide) and
+	 * `badge` a Badge's (20px, 56px wide), both fully rounded, so the row doesn't move when the real one arrives.
+	 * `width` overrides the width. */
+	variant?: "text" | "rect" | "circle" | "pill" | "badge" | undefined;
 	/** text only: number of lines (the last is shorter). */
 	lines?: number | undefined;
 	width?: number | string | undefined;
@@ -1634,6 +1659,9 @@ export interface FieldComponentProps extends Omit<FieldPropsPublic, "label"> {
 	/** The control's id: the label points at it, and the hint/error ids derive from it. */
 	id?: string | undefined;
 	children?: React$1.ReactNode | undefined;
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the control, in a `.aura-field__addon` box with the
+	 * id `{id}-addon`. TextField and Textarea add that id to the input's `aria-describedby`; a custom control should too. */
+	labelAddon?: React$1.ReactNode | undefined;
 	/** Render the label as another element (e.g. `span` for a group of controls) with this id. */
 	labelAs?: string | undefined;
 	labelId?: string | undefined;
@@ -1766,6 +1794,28 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
+ * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
+ * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from
+ * `/server`. It renders a plain `div`: to name a region by its title, put `aria-labelledby={titleId}` on your own
+ * `<section>`, or pass `role="region"` with it. */
+export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
+	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
+	eyebrow?: React$1.ReactNode | undefined;
+	/** The page's heading. */
+	title: React$1.ReactNode;
+	/** A line under the title — counts, last update, owner. */
+	meta?: React$1.ReactNode | undefined;
+	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
+	actions?: React$1.ReactNode | undefined;
+	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
+	headingLevel?: 1 | 2 | 3 | undefined;
+	/** The heading's id, for `aria-labelledby` on the page's region. */
+	titleId?: string | undefined;
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+}
+export declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 /** AppShell — side navigation + top bar + content. The nav is fixed from lg (1024px) up and a Drawer below it.
  * Which one shows is decided in CSS (4.16), so the server's HTML is already right on a phone and nothing shifts on
  * hydration; JavaScript only opens and closes the drawer. */

package/dist/index.d.ts

@@ -344,7 +344,8 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 	icon: IconInput;
 	/** `danger` colours the icon and hover for a destructive action (Delete, Revoke). */
 	tone?: "neutral" | "danger" | undefined;
-	/** Accessible name and tooltip (required). */
+	/** Accessible name and tooltip (required). Since 5.32 the tooltip is AURA's own (hover and keyboard focus), not a
+	 * native `title`; pass `title` yourself to keep a native one instead. */
 	label: string;
 	/** Icon size. Default `sm` (16). */
 	size?: "sm" | "md" | undefined;
@@ -415,6 +416,13 @@ export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttrib
 	icon?: IconInput | undefined;
 	/** Trailing unit, e.g. "THB". */
 	suffix?: React$1.ReactNode | undefined;
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the box — e.g. the phrase to type, with a copy
+	 * button, on a typed confirmation. The hint and error stay below. Its box's id (`{id}-addon`) comes first in the
+	 * input's `aria-describedby`, so its text is read after the label; keep any button names in it short. */
+	labelAddon?: React$1.ReactNode | undefined;
+	/** `false` keeps the addon out of `aria-describedby` — for one that isn't a description (a "Forgot password?"
+	 * link), or to name only part of it: give that part an id and pass it in `aria-describedby`. Default `true`. */
+	labelAddonDescribes?: boolean | undefined;
 	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
 	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
 	 * Default: the density's input height. */
@@ -540,6 +548,13 @@ export interface CommandProps {
 	className?: string | undefined;
 }
 export interface TextareaProps extends FieldProps, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the box — e.g. the phrase to type, with a copy
+	 * button, on a typed confirmation. The hint and error stay below. Its box's id (`{id}-addon`) comes first in the
+	 * input's `aria-describedby`, so its text is read after the label; keep any button names in it short. */
+	labelAddon?: React$1.ReactNode | undefined;
+	/** `false` keeps the addon out of `aria-describedby` — for one that isn't a description (a "Forgot password?"
+	 * link), or to name only part of it: give that part an id and pass it in `aria-describedby`. Default `true`. */
+	labelAddonDescribes?: boolean | undefined;
 	/** Accepted like the other fields' (5.30, Chamber-OS 135), so a form can pass it to every field. A Textarea is
 	 * always at least 96px tall, well over the 44px target, so it changes nothing you can see. */
 	touchHeight?: TouchHeight | undefined;
@@ -814,6 +829,10 @@ export interface SideNavProps {
 	defaultValue?: string | undefined;
 	onChange?: ((id: string) => void) | undefined;
 	header?: React$1.ReactNode | undefined;
+	/** 5.32 (DxT Monitor request 1): a full-width 1px aura-border-default line under `header`, with the board's metrics:
+	 * the header at least 72px tall with its content 20px from the top and start, the line at its foot, and 16px
+	 * before the first item. Default `false`. */
+	headerDivider?: boolean | undefined;
 	footer?: React$1.ReactNode | undefined;
 	/** Default "Main". */
 	label?: string | undefined;
@@ -1200,7 +1219,9 @@ export interface AppShellProps {
 	/** A BottomNav for phones (4.19). Shown below its `hideFrom` breakpoint; the content keeps room for it, and a
 	 * viewport ActionBar sits on top of it. With a `bottomNav` and no `nav`, there is no menu button. */
 	bottomNav?: React$1.ReactElement | undefined;
-	/** `false` (5.14): `<main>` has no padding, for pages whose containers own the page padding and column. */
+	/** The content padding is the page margin: 16px at the sides and 24px top and bottom on phones, 24px from 640px,
+	 * 32px from 1024px. Pages don't add their own (a PageHeader has none, 5.32). `false` (5.14): `<main>` has no
+	 * padding, for pages whose containers own the page padding and column. */
 	contentPadding?: boolean | undefined;
 	className?: string | undefined;
 }
@@ -1324,7 +1345,8 @@ export interface BottomNavItem {
 	/** Read after the label when `badge` is set, e.g. "new". */
 	badgeLabel?: string | undefined;
 	/** The full name for screen readers when `label` is shortened to fit (5.7), e.g. label "Konto", ariaLabel
-	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3). The count or badge is still appended. */
+	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3); a dev warning says when it doesn't (5.32). The count or badge is
+	 * still appended. */
 	ariaLabel?: string | undefined;
 }
 export interface BottomNavProps {
@@ -1476,7 +1498,10 @@ export interface ProgressProps {
 	className?: string | undefined;
 }
 export interface SkeletonProps {
-	variant?: "text" | "rect" | "circle" | undefined;
+	/** 5.32 (DxT Monitor request 4): `pill` is a StatusPill's size (20px tall, 22px under `lang="th"`, 72px wide) and
+	 * `badge` a Badge's (20px, 56px wide), both fully rounded, so the row doesn't move when the real one arrives.
+	 * `width` overrides the width. */
+	variant?: "text" | "rect" | "circle" | "pill" | "badge" | undefined;
 	/** text only: number of lines (the last is shorter). */
 	lines?: number | undefined;
 	width?: number | string | undefined;
@@ -1634,6 +1659,9 @@ export interface FieldComponentProps extends Omit<FieldPropsPublic, "label"> {
 	/** The control's id: the label points at it, and the hint/error ids derive from it. */
 	id?: string | undefined;
 	children?: React$1.ReactNode | undefined;
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the control, in a `.aura-field__addon` box with the
+	 * id `{id}-addon`. TextField and Textarea add that id to the input's `aria-describedby`; a custom control should too. */
+	labelAddon?: React$1.ReactNode | undefined;
 	/** Render the label as another element (e.g. `span` for a group of controls) with this id. */
 	labelAs?: string | undefined;
 	labelId?: string | undefined;
@@ -1766,6 +1794,28 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
+ * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
+ * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from
+ * `/server`. It renders a plain `div`: to name a region by its title, put `aria-labelledby={titleId}` on your own
+ * `<section>`, or pass `role="region"` with it. */
+export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
+	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
+	eyebrow?: React$1.ReactNode | undefined;
+	/** The page's heading. */
+	title: React$1.ReactNode;
+	/** A line under the title — counts, last update, owner. */
+	meta?: React$1.ReactNode | undefined;
+	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
+	actions?: React$1.ReactNode | undefined;
+	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
+	headingLevel?: 1 | 2 | 3 | undefined;
+	/** The heading's id, for `aria-labelledby` on the page's region. */
+	titleId?: string | undefined;
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+}
+export declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 /** AppShell — side navigation + top bar + content. The nav is fixed from lg (1024px) up and a Drawer below it.
  * Which one shows is decided in CSS (4.16), so the server's HTML is already right on a phone and nothing shifts on
  * hydration; JavaScript only opens and closes the drawer. */

package/dist/server/index.cjs

@@ -37,6 +37,7 @@ __export(server_exports, {
   Container: () => Container,
   EmptyState: () => ServerEmptyState,
   Icon: () => Icon,
+  PageHeader: () => PageHeader,
   STRINGS: () => STRINGS,
   Stat: () => ServerStat,
   StatusPill: () => ServerStatusPill,
@@ -606,14 +607,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h4 = String(hex).trim().replace("#", "");
-  if (h4.length === 3)
-    h4 = h4.split("").map(function(c) {
+  let h5 = String(hex).trim().replace("#", "");
+  if (h5.length === 3)
+    h5 = h5.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h4)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h5)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h4.slice(i, i + 2), 16) / 255;
+    return parseInt(h5.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -768,6 +769,13 @@ function createTheme(opts) {
     D["accent-lime"] = s[200];
     D["mesh-to"] = s[200];
   }
+  function onFill(bg) {
+    return contrast(ZINC[0], bg) >= contrast(INK, bg) ? ZINC[0] : INK;
+  }
+  L["control-checked-bg"] = L["accent-violet"];
+  L["control-checked-fg"] = onFill(L["control-checked-bg"]);
+  D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
+  D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -850,6 +858,30 @@ function createTheme(opts) {
     );
   }
   if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
+  [
+    [
+      "light",
+      L,
+      [
+        ["bg-surface", ZINC[0]],
+        ["bg-canvas", ZINC[50]]
+      ]
+    ],
+    [
+      "dark",
+      D,
+      [
+        ["bg-surface", ZINC[900]],
+        ["bg-canvas", ZINC[950]]
+      ]
+    ]
+  ].forEach(function(g) {
+    const t = g[0], m = g[1];
+    g[2].forEach(function(gr) {
+      check(t, "control-checked-bg", gr[0], 3, m["control-checked-bg"], gr[1]);
+    });
+    check(t, "control-checked-fg", "control-checked-bg", 4.5, m["control-checked-fg"], m["control-checked-bg"]);
+  });
   function css(selector) {
     if (selector !== void 0 && /[<{};@\r\n]|\/\*|\*\//.test(selector))
       throw new Error('createTheme: "' + selector + '" is not a plain CSS selector');
@@ -1344,3 +1376,27 @@ var Container = React4.forwardRef(function Container2(props, ref) {
     props.children
   );
 });
+
+// src/PageHeader.tsx
+var React5 = __toESM(require("react"), 1);
+var h4 = React5.createElement;
+var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
+  const attrs = {};
+  Object.keys(props).forEach(function(k) {
+    if (k === "id" || k === "lang" || k === "dir" || k === "role" || /^(aria|data)-/.test(k))
+      attrs[k] = props[k];
+  });
+  const level = props.headingLevel || 1;
+  return h4(
+    "div",
+    Object.assign(attrs, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    h4(
+      "div",
+      { className: "aura-page-header__text" },
+      props.eyebrow != null && props.eyebrow !== false ? h4("p", { className: "aura-page-header__eyebrow" }, props.eyebrow) : null,
+      h4("h" + level, { className: "aura-page-header__title", id: props.titleId }, props.title),
+      props.meta != null && props.meta !== false ? h4("div", { className: "aura-page-header__meta" }, props.meta) : null
+    ),
+    props.actions != null && props.actions !== false ? h4("div", { className: "aura-page-header__actions" }, props.actions) : null
+  );
+});

package/dist/server/index.d.cts

@@ -404,6 +404,28 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
+ * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
+ * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from
+ * `/server`. It renders a plain `div`: to name a region by its title, put `aria-labelledby={titleId}` on your own
+ * `<section>`, or pass `role="region"` with it. */
+export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
+	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
+	eyebrow?: React$1.ReactNode | undefined;
+	/** The page's heading. */
+	title: React$1.ReactNode;
+	/** A line under the title — counts, last update, owner. */
+	meta?: React$1.ReactNode | undefined;
+	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
+	actions?: React$1.ReactNode | undefined;
+	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
+	headingLevel?: 1 | 2 | 3 | undefined;
+	/** The heading's id, for `aria-labelledby` on the page's region. */
+	titleId?: string | undefined;
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+}
+export declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 
 export {
 	ServerAlert as Alert,

package/dist/server/index.d.ts

@@ -404,6 +404,28 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
+ * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
+ * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from
+ * `/server`. It renders a plain `div`: to name a region by its title, put `aria-labelledby={titleId}` on your own
+ * `<section>`, or pass `role="region"` with it. */
+export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
+	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
+	eyebrow?: React$1.ReactNode | undefined;
+	/** The page's heading. */
+	title: React$1.ReactNode;
+	/** A line under the title — counts, last update, owner. */
+	meta?: React$1.ReactNode | undefined;
+	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
+	actions?: React$1.ReactNode | undefined;
+	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
+	headingLevel?: 1 | 2 | 3 | undefined;
+	/** The heading's id, for `aria-labelledby` on the page's region. */
+	titleId?: string | undefined;
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+}
+export declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 
 export {
 	ServerAlert as Alert,

package/dist/server/index.js

@@ -546,14 +546,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h4 = String(hex).trim().replace("#", "");
-  if (h4.length === 3)
-    h4 = h4.split("").map(function(c) {
+  let h5 = String(hex).trim().replace("#", "");
+  if (h5.length === 3)
+    h5 = h5.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h4)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h5)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h4.slice(i, i + 2), 16) / 255;
+    return parseInt(h5.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -708,6 +708,13 @@ function createTheme(opts) {
     D["accent-lime"] = s[200];
     D["mesh-to"] = s[200];
   }
+  function onFill(bg) {
+    return contrast(ZINC[0], bg) >= contrast(INK, bg) ? ZINC[0] : INK;
+  }
+  L["control-checked-bg"] = L["accent-violet"];
+  L["control-checked-fg"] = onFill(L["control-checked-bg"]);
+  D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
+  D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -790,6 +797,30 @@ function createTheme(opts) {
     );
   }
   if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
+  [
+    [
+      "light",
+      L,
+      [
+        ["bg-surface", ZINC[0]],
+        ["bg-canvas", ZINC[50]]
+      ]
+    ],
+    [
+      "dark",
+      D,
+      [
+        ["bg-surface", ZINC[900]],
+        ["bg-canvas", ZINC[950]]
+      ]
+    ]
+  ].forEach(function(g) {
+    const t = g[0], m = g[1];
+    g[2].forEach(function(gr) {
+      check(t, "control-checked-bg", gr[0], 3, m["control-checked-bg"], gr[1]);
+    });
+    check(t, "control-checked-fg", "control-checked-bg", 4.5, m["control-checked-fg"], m["control-checked-bg"]);
+  });
   function css(selector) {
     if (selector !== void 0 && /[<{};@\r\n]|\/\*|\*\//.test(selector))
       throw new Error('createTheme: "' + selector + '" is not a plain CSS selector');
@@ -1284,6 +1315,30 @@ var Container = React4.forwardRef(function Container2(props, ref) {
     props.children
   );
 });
+
+// src/PageHeader.tsx
+import * as React5 from "react";
+var h4 = React5.createElement;
+var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
+  const attrs = {};
+  Object.keys(props).forEach(function(k) {
+    if (k === "id" || k === "lang" || k === "dir" || k === "role" || /^(aria|data)-/.test(k))
+      attrs[k] = props[k];
+  });
+  const level = props.headingLevel || 1;
+  return h4(
+    "div",
+    Object.assign(attrs, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    h4(
+      "div",
+      { className: "aura-page-header__text" },
+      props.eyebrow != null && props.eyebrow !== false ? h4("p", { className: "aura-page-header__eyebrow" }, props.eyebrow) : null,
+      h4("h" + level, { className: "aura-page-header__title", id: props.titleId }, props.title),
+      props.meta != null && props.meta !== false ? h4("div", { className: "aura-page-header__meta" }, props.meta) : null
+    ),
+    props.actions != null && props.actions !== false ? h4("div", { className: "aura-page-header__actions" }, props.actions) : null
+  );
+});
 export {
   ServerAlert as Alert,
   ServerAvatar as Avatar,
@@ -1292,6 +1347,7 @@ export {
   Container,
   ServerEmptyState as EmptyState,
   Icon,
+  PageHeader,
   STRINGS,
   ServerStat as Stat,
   ServerStatusPill as StatusPill,

package/dist/styles.css

@@ -356,6 +356,9 @@ a.aura-icon-btn { text-decoration: none; }
   background: var(--aura-bg-skeleton); animation: aura-pulse var(--aura-duration-pulse) var(--aura-ease) infinite;
 }
 .aura-skel--pill { width: 72px; height: 20px; }
+.aura-skel--badge { width: 56px; height: 20px; } /* 5.32: a Badge is 20px in every language */
+/* 5.32: they stand in for inline pills, so they sit in a line of text like them. */
+.aura-skel--pill, .aura-skel--badge { display: inline-block; vertical-align: middle; }
 .aura-skel--box { width: var(--aura-icon-sm); height: var(--aura-icon-sm); border-radius: var(--aura-radius-xs); }
 @media (prefers-reduced-motion: reduce) { .aura-skel { animation: none; } }
 /* 5.29 (Chamber-OS 134): a DataTable skeleton row stands in for the real one — text lines (skeletonLines) on the 20px
@@ -474,6 +477,8 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-field__hint, .aura-field__error { display: flex; align-items: flex-start; gap: var(--aura-space-1); margin: 0; font-size: 12px; line-height: 1.5; color: var(--aura-fg-secondary); }
 .aura-field__error { color: var(--aura-fg-danger); }
 .aura-field__error .aura-icon { margin-top: 2px; }
+/* 5.31 (Chamber-OS addendum 41): TextField/Textarea `labelAddon`, between the label and the box, in the field's gap. */
+.aura-field__addon { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-primary); }
 .aura-field.is-disabled .aura-field__label { color: var(--aura-fg-secondary); }
 
 .aura-input {
@@ -654,6 +659,8 @@ a.aura-icon-btn { text-decoration: none; }
 }
 /* The Tooltip component's own tips can be hovered (WCAG 1.4.13, 5.1.1); rail labels and cell tips stay click-through. */
 .aura-tooltip--hoverable { pointer-events: auto; }
+/* 5.32: the shared tip for icon buttons, Pagination arrows, icon-only segments and cut Tags (was a native title). */
+.aura-tooltip--auto:lang(th) { line-height: 1.6; }
 @keyframes aura-fade-in { from { opacity: 0; } }
 
 /* ---------- Dialog ---------- */
@@ -760,6 +767,10 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-nav__header { padding: var(--aura-space-5) var(--aura-space-4) var(--aura-space-4); padding-inline-end: var(--aura-space-2); } /* 5.16 (Chamber-OS 96): 8px at the end, so a brand, its dot and a badge share one row at 240px */
 .aura-nav__scroll { flex: 1; overflow-y: auto; padding: 0 var(--aura-space-3); }
+/* 5.32 (DxT Monitor request 1): headerDivider — the board's header: 72px, content 20px from the top and start, a
+ * full-width line at its foot, 16px before the first item. The collapsed rail keeps its own 8px sides (below). */
+.aura-nav--header-divider > .aura-nav__header { box-sizing: border-box; min-height: 72px; padding-top: var(--aura-space-5); padding-bottom: var(--aura-space-3); padding-inline-start: var(--aura-space-5); border-bottom: 1px solid var(--aura-border-default); }
+.aura-nav--header-divider > .aura-nav__header + .aura-nav__scroll { padding-top: var(--aura-space-4); }
 /* No header: keep the first item off the top edge (5.0.2). */
 .aura-nav > .aura-nav__scroll:first-child { padding-top: var(--aura-space-3); }
 .aura-nav--borderless { border-right: 0; }
@@ -985,7 +996,7 @@ a.aura-tab { text-decoration: none; }
 .aura-drawer--lg { max-width: var(--aura-drawer-lg); }
 .aura-drawer--nav { max-width: var(--aura-sidenav-width); }
 .aura-drawer__head { display: flex; align-items: center; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-4) var(--aura-space-2) var(--aura-space-6); }
-.aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); right: var(--aura-space-2); padding: 0; z-index: 1; }
+.aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); inset-inline-end: var(--aura-space-2); padding: 0; z-index: 1; } /* 5.32: inline-end, so RTL puts it on the left with the header's room */
 .aura-drawer__title { flex: 1; margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
 .aura-drawer__desc { margin: 0; padding: 0 var(--aura-space-6); font-size: 14px; line-height: 1.7; color: var(--aura-fg-secondary); }
 .aura-drawer__body {
@@ -995,6 +1006,8 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-drawer--nav .aura-drawer__body { padding: 0; }
 .aura-drawer--nav .aura-nav { width: 100%; border-right: 0; }
+/* 5.32: the phone drawer's close button (32px, 8px in) sits over the header's end: keep the brand clear of it. */
+.aura-drawer--nav .aura-nav__header { padding-inline-end: 48px; }
 .aura-drawer__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-6); border-top: 1px solid var(--aura-border-default); }
 @media (prefers-reduced-motion: reduce) { .aura-drawer { animation: none; } }
 
@@ -1072,6 +1085,21 @@ a.aura-tab { text-decoration: none; }
 /* The shell already pads its content: a Container directly inside only caps the width. */
 .aura-shell__content:not(.is-flush) > .aura-container { padding-left: 0; padding-right: 0; }
 
+/* ---------- PageHeader (5.32, DxT Monitor request 3) ----------
+ * No outer padding: AppShell's content padding is the page margin. Eyebrow mono 12/1.7, h1 display 36/1.15,
+ * meta 13/1.5, 4px between them; actions at the end, on the text's last line, 24px away; below 640px the title is
+ * 28px and the actions wrap under the text. */
+.aura-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--aura-space-4) var(--aura-space-6); min-width: 0; font-family: var(--font-sans); }
+.aura-page-header__text { display: flex; flex-direction: column; gap: var(--aura-space-1); flex: 1 1 320px; min-width: 0; }
+.aura-page-header__eyebrow { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
+.aura-page-header__title { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: var(--aura-fg-primary); overflow-wrap: anywhere; }
+.aura-page-header__meta { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
+.aura-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+@media (min-width: 640px) { .aura-page-header__title { font-size: 36px; } }
+/* Thai marks need the room a 1.15 line takes away. */
+.aura-page-header__title:lang(th) { line-height: 1.4; letter-spacing: 0; }
+.aura-page-header__meta:lang(th) { line-height: 1.6; }
+
 /* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
 /* 5.30: a 2px hairline-colour rule over the totals (border-strong was a glaring white line in dark); a pinned totals row
  * casts a soft shadow over the rows scrolling under it. */
@@ -2077,7 +2105,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 /* 5.30 (audit D): field labels, hints and errors and choice descriptions get Thai line room; a stacked card's field
  * labels are 12px in the sans face (the mono face has no Thai), and a stacked DataTable card's values sit on a set
  * 1.6 line, so a loading card (its bars follow 1lh) is as tall as one with Thai text. */
-.aura-field__label:lang(th), .aura-field__hint:lang(th), .aura-field__error:lang(th) { line-height: 1.6; }
+.aura-field__label:lang(th), .aura-field__hint:lang(th), .aura-field__error:lang(th), .aura-field__addon:lang(th) { line-height: 1.6; }
 .aura-choice__desc:lang(th), .aura-check__desc:lang(th) { font-size: 13px; line-height: 1.6; }
 .aura-tbl__row > .aura-tbl__td[data-label]:lang(th)::before, .aura-table__td[data-label]:lang(th)::before { font-family: var(--font-sans); font-size: 12px; line-height: 18px; }
 .aura-table--stacked .aura-table__td[data-label]:lang(th) { line-height: 1.6; }