@godxjp/ui 18.5.0 → 18.7.0

package/dist/tokens/components/shell.css

@@ -54,6 +54,15 @@
   --sidebar-brand-mark-size: 1.375rem;
   --sidebar-nav-item-height: 2rem;
   --sidebar-nav-item-font-size: 0.8125rem;
+  /* Line box of the nav LABEL, not the row (gh#254): `.sb-label` clips, so its line box is its clip
+   * box, and the row's `line-height: 1` shears descenders and Vietnamese tone marks. Keep >= 1.2. */
+  --sidebar-nav-item-line-height: 1.5;
+  /* Same gh#254 trap, two more clipping boxes. `.ui-auth-account-email` and the truncating last
+   * child of `.ui-topbar-start` both clip (`overflow: hidden`/`clip` + `text-overflow: ellipsis`),
+   * so their line box IS their clip box — inheriting a tight value shears descenders and Vietnamese
+   * tone marks exactly as the sidebar label did. Keep >= 1.2. */
+  --auth-account-summary-email-line-height: 1.5;
+  --topbar-start-truncate-line-height: 1.5;
   --sidebar-nav-icon-size: 1rem;
   --sidebar-nav-item-gap: 0.625rem;
   --sidebar-nav-item-padding-x: 0.625rem;
@@ -72,6 +81,11 @@
   --topbar-height: auto;
   --topbar-inset: 0px;
   --topbar-gap: var(--space-2);
+  /* At compact desktop/tablet widths the docked sidebar leaves too little inline room for three
+   * intrinsically-sized clusters. The package hides the optional center slot before it can cover
+   * the breadcrumb/title or end utilities. Consumers may opt back into another display strategy
+   * (for example `flex`) once their center content has its own compact presentation. */
+  --topbar-center-compact-display: none;
   --org-switcher-trigger-height: 2.75rem;
   --org-switcher-trigger-padding-x: var(--space-2);
   --org-switcher-avatar-size: 1.75rem;
@@ -144,6 +158,24 @@
    * (quiet, rule #44) so an existing single-card consumer is untouched; presets opt in. */
   --auth-shell-card-stack-gap: 0px;
 
+  /* Login preset (gh#237) — canonical SCR-001 anchors at 1440x900, 1024x900 and 390x844.
+   * The 112px identity slot is deliberately taller than a two-line real requester. Identity
+   * content aligns to the slot end, so missing/one-line/two-line requester data changes only the
+   * empty space above it, never the card or footer position. The flow starts at y=231 desktop and
+   * y=221 mobile: 231/221 + 112 + 20 gap = card y=363/353. Literal artboard lengths belong here,
+   * not in a consumer selector, and do not drift with --scaling. */
+  --auth-shell-login-card-max-width: 22.5rem;
+  --auth-shell-login-flow-offset-block: 14.4375rem;
+  --auth-shell-login-flow-offset-block-mobile: 13.8125rem;
+  --auth-shell-login-main-padding-inline: 1rem;
+  --auth-shell-login-main-padding-inline-mobile: 0.9375rem;
+  --auth-shell-login-main-padding-block-end: 1rem;
+  --auth-shell-login-identity-slot-block-size: 7rem;
+  --auth-shell-login-card-stack-gap: 1.25rem;
+  --auth-shell-login-card-padding-block-compact: calc(
+    var(--auth-shell-compact-card-inset) + var(--control-border-width) + var(--control-border-width)
+  );
+
   /* Device-authorization preset — 380px card measure, 15px block · 5px inline mobile gutter
    * (at a 390px viewport the card is x=5px, width=380px). */
   --auth-shell-device-card-max-width: 23.75rem;
@@ -169,6 +201,43 @@
   --auth-shell-recovery-main-padding: 1rem;
   --auth-shell-recovery-main-padding-mobile: 0.9375rem;
 
+  /* Registration preset (gh#256) — the canonical sign-up measure. Two things make it structurally
+   * different from every preset above, and both are the reason it could not be expressed by
+   * re-using `login`:
+   *
+   *  1. LONG-FORM SCROLLING. A registration card is the tallest surface in the hosted-identity set
+   *     (name · email · password · confirm · strength meter · consent · submit · provider row), and
+   *     a vertically CENTRED tall card clips its own top on a short viewport — the top overflows
+   *     above the scroll origin and becomes unreachable. So the column is start-aligned and the
+   *     block-start inset becomes ordinary page padding the user can scroll past.
+   *  2. FOOTER CLEARANCE. The legal/consent footer must never be flush against the submit button
+   *     at the end of a long scroll, so the block-end inset is a knob of its own rather than
+   *     mirroring the block-start one.
+   *
+   * The 360px form measure and the 15px mobile inline gutter match the canonical Login flow exactly
+   * (22.5rem card, x=15 at 390 ⇒ width=360), so a user moving sign-in → sign-up on a phone never
+   * sees the surface jump. */
+  --auth-shell-registration-card-max-width: 22.5rem;
+  /* Block-start offsets are DERIVED from the canonical SCR-002 artboard, not chosen: the card
+   * anchors at y=284 (1440x900) and y=274 (390x844), and the column is
+   *   card y = padding-block-start + identity slot + stack gap
+   * so 284 - 112 - 20 = 152px (9.5rem) and 274 - 112 - 20 = 142px (8.875rem). Like every canonical
+   * screen in this family the page passes NO brand bar (the mark lives INSIDE the column as
+   * AuthIdentity), so `main` starts at the viewport top and the offset is the whole anchor. */
+  --auth-shell-registration-main-padding-block-start: 9.5rem;
+  --auth-shell-registration-main-padding-block-start-mobile: 8.875rem;
+  --auth-shell-registration-main-padding-inline: 1rem;
+  --auth-shell-registration-main-padding-inline-mobile: 0.9375rem;
+  /* Footer clearance — the gap the legal footer keeps below the end of a long form. */
+  --auth-shell-registration-main-padding-block-end: 3rem;
+  --auth-shell-registration-main-padding-block-end-mobile: 2rem;
+  --auth-shell-registration-card-stack-gap: 1.25rem;
+  /* Fixed identity track, the same 112px `login` proved (gh#237). Without it the card anchor moves
+   * with the title/requester line count — measured here at 82.69px for one wrapped requester — so
+   * the canonical y above would hold for exactly one copy length and drift for every other. The
+   * slot absorbs absent / one-line / two-line identity content instead. */
+  --auth-shell-registration-identity-slot-block-size: 7rem;
+
   /* Labelled auth divider geometry. */
   --auth-shell-divider-gap: 0.625rem;
   --auth-shell-divider-label-font-size: 0.6875rem;
@@ -178,6 +247,13 @@
   --auth-requester-gap: 0.375rem;
   --auth-requester-icon-size: 1rem;
   --auth-requester-glyph-size: 0.625rem;
+  --auth-account-summary-min-height: var(--control-height-comfortable);
+  --auth-account-summary-gap: var(--space-2);
+  --auth-account-summary-padding: var(--space-1) var(--space-2);
+  --auth-account-summary-identity-min-width: 12rem;
+  --auth-account-summary-avatar-size: var(--control-height-sm);
+  --auth-account-summary-avatar-glyph-size: var(--control-icon-size-sm);
+  --auth-account-summary-email-font-size: var(--font-size-sm);
   --auth-footer-content-gap: 0.375rem;
   --auth-footer-text-font-size: 0.6875rem;
   --auth-stack-gap: var(--space-3);
@@ -203,3 +279,36 @@
   --centered-shell-width-md: 46rem;
   --centered-shell-width-lg: 64rem;
 }
+
+/* CenteredShell · public-landing preset (gh#252) — the token-owned geometry of a PUBLIC marketing
+ * / product landing page: one content measure shared by header, main column and footer, the
+ * section rhythm between page sections, the flat (chrome-quiet) card presentation and the hero
+ * heading tier. Every value is a service-themeable knob (rule #45): a landing composition is a
+ * COMPOSITION of real primitives (docs/COMPOSITION-VS-COMPONENT.md — Hero/Navbar/Footer FAIL the
+ * Framework-Component Test), so the consumer must never own geometry or a media query. These
+ * knobs are read ONLY under `.ui-centered-shell[data-preset="public-landing"]`, so the default
+ * shell — which emits no `data-preset` at all — is byte-identical to before. */
+:root {
+  --centered-shell-landing-max-width: 67.5rem; /* 1080px — header/main/footer share ONE measure */
+  --centered-shell-landing-inset-inline: var(--space-6); /* 24px page gutter ≥ 40rem */
+  --centered-shell-landing-inset-inline-compact: var(--space-4); /* 16px page gutter < 40rem */
+  --centered-shell-landing-main-padding-block: var(--space-10); /* 40px */
+  --centered-shell-landing-main-padding-block-compact: var(--space-6); /* 24px */
+  --centered-shell-landing-section-gap: var(--space-10); /* rhythm BETWEEN page sections */
+  --centered-shell-landing-section-gap-compact: var(--space-6);
+  --centered-shell-landing-footer-padding-block: var(--space-8);
+  /* Chrome is a token, default quiet (rule #44): a landing surface is FLAT — no card elevation —
+   * so a service opts back IN with `--centered-shell-landing-card-shadow: var(--card-shadow)`. */
+  --centered-shell-landing-card-shadow: none;
+  /* Hero heading tier. The preset re-points `--heading-h1` (same mechanism as
+   * `.ui-auth-shell` → `--auth-shell-heading-size`), so a hero title is a real `Heading level={1}`
+   * and never a consumer font-size. */
+  --centered-shell-landing-heading-size: var(--font-size-display);
+  --centered-shell-landing-heading-size-compact: var(--font-size-3xl);
+  /* Role-mirror knob — MUST stay `initial`, with the role default at the CALL SITE
+   * (`var(--centered-shell-landing-background, var(--background))`), so a scoped
+   * `[data-tenant]` / `.dark` override of `--background` still reaches it (docs/TOKENS.md ·
+   * "Role-mirror knobs MUST be `initial`"). Documented default = hsl(var(--background)) — a public
+   * page is the plain page canvas, not the app's `--muted` chrome. */
+  --centered-shell-landing-background: initial;
+}

package/dist/tokens/components/table.css

@@ -7,6 +7,29 @@
   --table-row-height: calc(var(--table-row-height-default) * var(--scaling));
   --table-cell-padding-y: var(--space-2);
   --table-cell-space-x: var(--control-padding-x);
+  /* Pagination footer inset (gh#236). The footer ships as a SELF-CONTAINED slot and is commonly
+   * placed in a flush container (`<Card><CardContent flush><DataTable/>`), where no ancestor
+   * supplies padding — so it owns its own on BOTH axes instead of declaring block-start only.
+   * Block default = the previous single `padding-top` value, now on both block edges (breathing
+   * room above the footer and before the container's closing border). Inline default = the cell
+   * inline padding, so the "rows per page" label sits on the same optical axis as the first
+   * column's text. A service retunes either axis to its own grid (#45).
+   * Both are declared `initial` so the defaults re-resolve at the CALL SITE: --space-stack-sm and
+   * --table-cell-space-x are density-scaled and re-declared inside a `.ui-density-*` subtree, and a
+   * :root binding would freeze the footer at the :root density (docs/TOKENS.md — the :root freeze
+   * rule). Defaults = var(--space-stack-sm) block · var(--table-cell-space-x) inline. */
+  --table-pagination-padding-y: initial;
+  --table-pagination-padding-x: initial;
+  /* DataTable surface — narrow-viewport legibility FLOOR (gh#253). Below the `sm` viewport step a
+   * multi-column admin grid whose columns are `white-space: nowrap` would otherwise be crushed, so
+   * the bordered surface keeps a minimum inline size and `.ui-data-table-scroll` scrolls instead.
+   * This shipped as a hard-coded `min-w-[640px]` utility on the surface element, which left a
+   * service that wants a narrower (or no) floor with no route but forking the component (#45).
+   * Default = the previous literal, in px so the floor releases at EXACTLY the same width as the
+   * px-based `sm` media query that clears it (a rem value would drift under a non-16px root and
+   * re-introduce the scroll between the two thresholds). Set `0` to opt out entirely — which is
+   * what `preset="action-collection"` does, because there the priority measures own the width. */
+  --table-surface-min-inline-size: 640px;
   --table-head-font-size: var(--font-size-xs);
   /* Header band — its OWN bg + fg knobs (decoupled from --secondary). Declared `initial` so the
    * default re-resolves to the LIVE --muted / --muted-foreground roles at the call site: a :root
@@ -24,3 +47,25 @@
   --table-row-hover-background: initial;
   --table-row-selected-background: initial;
 }
+
+/* Table · action-collection preset (gh#253) — the canonical dense approval / action queue.
+ * Column PRIORITY measures replace the desktop intrinsic widths (a nowrap free-text column is
+ * what makes a five-column queue wider than its card and forces a horizontal scroll). Nothing
+ * here is read unless `preset="action-collection"` is set, so every existing table is untouched.
+ * Percentages so the ratio holds at any card width; the action affordance is an absolute measure
+ * because it must never be squeezed below its touch target. */
+:root {
+  --table-action-collection-primary-width: 18%; /* requester / subject */
+  --table-action-collection-secondary-width: 22%; /* target / resource */
+  --table-action-collection-meta-width: 12%; /* timestamps, ids — lowest priority */
+  --table-action-collection-actions-width: 3.5rem; /* row-action affordance, never clipped */
+  /* Compact tier, applied below the collapse step (the 390px acceptance frame). */
+  --table-action-collection-primary-width-compact: 24%;
+  --table-action-collection-secondary-width-compact: 22%;
+  --table-action-collection-meta-width-compact: 20%;
+  --table-action-collection-actions-width-compact: 2.75rem;
+  --table-action-collection-font-size-compact: var(--font-size-xs);
+  --table-action-collection-cell-space-x-compact: var(--space-2);
+  --table-action-collection-cell-padding-y-compact: var(--space-2);
+  --table-action-collection-row-height-compact: var(--table-row-height-compact);
+}

package/dist/tokens/foundation.css

@@ -31,6 +31,25 @@
   --attention: 25 99% 46%; /* 朱 #eb6101 */
   --attention-foreground: 60 33% 99%;
 
+  /* IDENTITY role — the canonical GoDX emerald. This is the PRODUCT MARK colour (Logo `mark="godx"`
+   * / `tone="success"`, its wordmark, the email brand capsule), and it is deliberately THREE-WAY
+   * distinct:
+   *   · from --primary   — a service re-theming its action colour must never recolour the mark;
+   *   · from --success   — 若竹 #68be8d is the STATUS green (badges, progress, "saved" text) and
+   *                        stays exactly as it is. The mark previously borrowed it, which rendered
+   *                        the identity at #69bf8e instead of the canonical emerald — ΔE76 ≈ 17.5,
+   *                        a plainly wrong brand colour (gh#250/#214);
+   *   · from --text-brand / --color-brand — those are the BLUE brand-numeral TEXT slot and the
+   *                        Tailwind `text-brand` utility it feeds; unrelated, and not renamed here.
+   * Canonical value: oklch(0.595 0.137 162.94) = #009766, "kept distinct from SmartHR primary".
+   * The triplet is carried at one decimal so hsl() lands on that exact hex (an integer 160 100% 30%
+   * would drift to #009966). Dark lifts lightness only — same hue, same full chroma — so the mark
+   * stays the same emerald while clearing AA against the dark spine.
+   * There is no Tailwind `bg-brand` utility on purpose: `--color-brand` is already taken by
+   * --text-brand, so identity surfaces read `hsl(var(--brand))` directly in component CSS. */
+  --brand: 160.5 100% 29.6%; /* 翠 GoDX emerald #009766 */
+  --brand-foreground: 60 33% 99%;
+
   /* Extended text hierarchy (beyond --foreground / --muted-foreground) — themeable per service.
    * Roles primitives bake in today: caption/meta, disabled, inline link, brand numerals. */
   --text-tertiary: 44 5% 55%; /* lighter than muted-foreground — captions / meta */
@@ -380,6 +399,13 @@
   --attention: 25 95% 56%;
   --attention-foreground: 48 9% 9%;
 
+  /* IDENTITY (dark) — the SAME canonical emerald hue/chroma, lifted 29.6% → 36% lightness so the
+   * mark reads off the warm near-black spine (#00b87c: 6.9:1 on --background, 6.3:1 on --card;
+   * the unlifted #009766 sat at 4.4:1 on the card). The on-fill glyph flips dark, exactly like
+   * --success-foreground does. */
+  --brand: 160.5 100% 36%; /* #00b87c */
+  --brand-foreground: 48 9% 9%;
+
   /* Extended text hierarchy + interaction ramp (dark) */
   --text-tertiary: 44 6% 56%;
   --text-disabled: 45 6% 40%;

package/dist/tokens/semantic/layout.css

@@ -83,6 +83,34 @@
    * page moves. 11rem = 176px, i.e. the control ends flush with the compact page gutter. */
   --page-header-extra-measure: 11rem; /* 176px */
 
+  /* Inline gap between the `<h1>` and the PageHeader `meta` slot (a status Badge, a record ID) when
+   * they share the title band (gh#255). Only consumed when `meta` is passed — a header without it
+   * emits no band wrapper at all, so no existing page moves. */
+  --page-header-meta-gap: var(--space-inline-sm);
+
+  /* PageHeader `loading` placeholders (gh#255). The title/subtitle elements wear the shared
+   * `.ui-skeleton-block` skin, so they need only a MEASURE and a block size — a service retunes the
+   * pending band's proportions here instead of per page. */
+  --page-title-placeholder-measure: 14rem; /* 224px */
+  --page-title-placeholder-block-size: 1.5em;
+  --page-subtitle-placeholder-measure: 22rem; /* 352px */
+  --page-subtitle-placeholder-block-size: 1.25em;
+
+  /* Bounded page MEASURE (gh#245 / gh#247) — the shared inline cap applied to the page HEADER and
+   * BODY together, so the header `extra` action ends on the same edge as the body surface (the
+   * `variant="narrow"` complaint: it caps only `.ui-page-body`, leaving the header action out at
+   * the page edge). Selected by the semantic `measure` prop; `measure="default"` reads NEITHER
+   * token, so an existing page is untouched.
+   *
+   * These are OUTER measures: the page gutters (--space-page-active-x, 24px each side by default)
+   * live INSIDE the cap, so the VISIBLE surface is the measure minus both gutters:
+   *   narrow  42rem = 672px → 624px visible surface (the historical variant="narrow" body width)
+   *   medium  48rem = 768px → 720px visible surface (the canonical readable/feed measure)
+   * Below the cap nothing binds, so a 390px viewport stays fluid at the 16px compact gutter
+   * (358px surface). A service theme retunes both in ONE place; never a page-local max-width. */
+  --page-measure-narrow: 42rem; /* 672px outer → 624px surface */
+  --page-measure-medium: 48rem; /* 768px outer → 720px surface */
+
   /* Responsive page typography is independent from density. Density changes information spacing;
    * these tokens change only page chrome so mobile keeps readable body text and touch targets. */
   --page-title-font-size: var(--heading-h1);
@@ -104,3 +132,13 @@
    * whole system stays in sync (gh feedback: Descriptions was ~0px while FormField was 8px). */
   --field-label-gap: var(--space-2); /* 8px */
 }
+
+/* Canonical admin collection composition. Services may retune these semantic knobs once. */
+:root {
+  --admin-collection-control-height: var(--control-height-default);
+  --admin-collection-section-gap: var(--space-stack-md);
+  --admin-collection-toolbar-padding-y: 0px;
+  --admin-collection-search-measure: 20rem;
+  --admin-collection-table-row-height: var(--table-row-height-default);
+  --admin-collection-table-cell-padding-y: var(--space-1);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.5.0",
-  "godxUiMcp": "18.5.0",
+  "version": "18.7.0",
+  "godxUiMcp": "18.7.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "pnpm": {
@@ -66,6 +66,10 @@
       "types": "./dist/components/charts/index.d.ts",
       "import": "./dist/components/charts/index.js"
     },
+    "./charts/compact-bar-trend": {
+      "types": "./dist/components/charts/compact-bar-trend.d.ts",
+      "import": "./dist/components/charts/compact-bar-trend.js"
+    },
     "./ui": {
       "types": "./dist/components/ui/index.d.ts",
       "import": "./dist/components/ui/index.js"
@@ -291,6 +295,8 @@
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
     "test": "vitest run",
+    "test:visual:auth-login": "node scripts/auth-shell-login-visual.mjs",
+    "test:visual:topbar-collision": "node scripts/topbar-collision-visual.mjs",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "check:example-imports": "node scripts/check-example-imports.mjs",