fix(Center): complete Night Watch audit

[cixzhang]

User impact

Center now keeps its own theme-axis metadata even when a consumer passes a colliding data-axis, the public horizontal-centering example actually renders Center, and the shipped logical padding contract has reusable RTL evidence.

Audit result

• Component: core/Center
• Queue reason: first refreshed queue item; never audited
• Mode: Night Watch (N)
• Rubric: 1.16.2 (the patch advanced from the task-pinned 1.16.1 during this run; scoring is unchanged)
• Baseline: 73.3 / C, 3 BLOCKs
• Final: 87.0 / C, 1 BLOCK
• Sensitivity: fix the 1 open BLOCK and change nothing else → projected 95.0 / A
• Audit baseline: 5447429bacc4baa6b02f70da73dcdb9bb7d6e8ee
• Reconciled main: ae4ad8375d1ce553cdc889e83c79c9bc6dd5756c
• Frozen head: 55f51a06c6e1f7780eecb078fa6bf10447579956
• Evidence commit: 2dce2e5c21f3
• Controlling exact-head review/spec approval: comment
• Tracker: final landed row c1021b151f

Section	Baseline	Final
Accessibility	4/5 limited	5/5 limited
Theming	5/5	5/5
Public API	3/5	4.5/5
Behavior	3/5	3/5
Design — objective	5/5 limited	5/5 limited
Design — rendered	5/5	5/5
Testing	3/5	4.5/5
Code health	5/5 limited	5/5 limited
Docs	3.5/5	4.5/5
i18n & RTL	3/5 limited	5/5 limited
Responsive & touch	5/5 limited	5/5 limited

Limited-section weights are redistributed per the rubric.

Changes

• Adds a draft observational Center contract using the current component schema. It records released behavior only and remains non-authoritative pending owner approval.
• Fixes architecture:public-component-api/INV5 / P3: a generic data-axis can no longer replace Center’s component-owned axis reflection. The public-seam regression was proven red before production changed, then green.
• Adds a mutation-sensitive SSR contract test and exact axis-layout assertions.
• Extends the shared RTL audit with writing-mode-aware D8 coverage: asymmetric logical padding keeps start/end meaning while the resolved physical inline edges swap left/right in horizontal writing or top/bottom in vertical writing. Center reports measured with zero RTL gaps.
• Corrects the CenterHorizontal public example so it renders Center and demonstrates horizontal centering rather than an unrelated split toolbar.

Evidence inventory

Closed: 26/26 rows accounted for. Each row maps one public surface or reachable branch to source, existing tests, consumer docs, rendered evidence, governing authority, and any surviving gap, as required by spec:AST-029/FR5.

Machine-readable evidence inventory

Public-surface → evidence receipt

ID	Public surface or branch	Source	Existing tests	Consumer docs	Rendered evidence	Authority	Result / gap
E01	@astryxdesign/core/Center package subpath	packages/core/package.json packages/core/src/Center/index.ts	scripts/verify-exports.mjs published @astryxdesign/core@0.5.4 export probe	packages/core/src/Center/Center.doc.mjs	N/A: module reachability is non-rendering; all Center frames import the public subpath	architecture:public-component-api/INV1 architecture:public-component-api/INV9 architecture:public-component-api/INV12	pass
E02	Center, CenterProps, and CenterAxis exports	packages/core/src/Center/index.ts packages/core/src/Center/Center.tsx	published @astryxdesign/core@0.5.4 declaration probe core typecheck	packages/core/src/Center/Center.doc.mjs	N/A: value/type export shape is non-visual	architecture:public-component-api/INV1 architecture:public-component-api/INV12	pass
E03	fixed div root and required children	packages/core/src/Center/Center.tsx	renders as div element renders on the server without a client boundary renders and centers children	Center.doc.mjs anatomy and children prop	all component frames	component:Center/FR1 component:Center/AV1	pass
E04	axis omitted or both	Center.tsx default axis='both' styles.alignItemsCenter styles.justifyContentCenter	renders and centers children (both axes by default)	Center.doc.mjs axis default Center.stories.tsx Default and AllAxisModes	neutral-{light,dark}-all-axis-modes matcha-{light,dark}-default	family:layout-primitives/FR5 component:Center/FR2	pass
E05	axis='horizontal' in horizontal writing	Center.tsx justifyContentCenter branch	centers horizontally only	Center.doc.mjs axis caveat Center.stories.tsx HorizontalOnly and AllAxisModes	neutral-{light,dark}-all-axis-modes	family:layout-primitives/FR5 component:Center/FR2	pass in horizontal writing; B15 applies outside horizontal writing; see E07
E06	axis='vertical' in horizontal writing	Center.tsx alignItemsCenter branch	centers vertically only	Center.doc.mjs axis caveat Center.stories.tsx VerticalOnly and AllAxisModes	neutral-{light,dark}-all-axis-modes	family:layout-primitives/FR5 component:Center/FR2	pass in horizontal writing; B15 applies outside horizontal writing; see E07
E07	single-axis modes under vertical writing	Center.tsx maps horizontal to justifyContent and vertical to alignItems	no unit assertion can establish physical geometry; browser measurement is authoritative	Center.doc.mjs and CenterHorizontal.doc.mjs explicit caveat component:Center draft FR2	Center__vertical-writing__{baseline,exact-head}-{light,dark} vertical-writing measurement receipts	family:layout-primitives/FR5 component:Center/FR2	BLOCK; B15: horizontal centers the vertical physical dimension and vertical centers the horizontal physical dimension under vertical-rl
E08	block-level flex display	Center.tsx styles.base	default and one-axis tests assert display:flex	Center.doc.mjs Center.stories.tsx Default	neutral-{light,dark}-all-axis-modes	component:Center/FR1	pass
E09	isInline=true inline-flex display	Center.tsx styles.inline branch	renders as inline-flex when isInline is true	Center.doc.mjs isInline Center.stories.tsx Inline	neutral-{light,dark}-inline	component:Center/FR1	pass
E10	numeric width	Center.tsx dynamicStyles.sizing	applies width prop	Center.doc.mjs width Center.stories.tsx AllAxisModes	neutral-{light,dark}-all-axis-modes records 300px boxes	family:layout-primitives/FR1 component:Center/FR3	pass; legacy unit assertion is render-only; covered by Chromium geometry
E11	CSS-value string width	Center.tsx dynamicStyles.sizing	applies both width and height props	Center.doc.mjs width Center.stories.tsx Default and FullSize	default frames record width='100%' resolved inside the story surface	family:layout-primitives/FR1 component:Center/FR3	pass; legacy unit assertion is render-only; covered by Chromium geometry
E12	numeric height	Center.tsx dynamicStyles.sizing	applies both width and height props	Center.doc.mjs height Center.stories.tsx Default, VerticalOnly, and AllAxisModes	default and all-axis frames record the requested 200px and 150px heights	family:layout-primitives/FR1 component:Center/FR3	pass; legacy unit assertion is render-only; covered by Chromium geometry
E13	CSS-value string height	Center.tsx dynamicStyles.sizing	applies height prop with 100%	Center.doc.mjs height	N/A: string acceptance is type/source verified; no distinct visual contract beyond resolved box geometry	family:layout-primitives/FR1 component:Center/FR3	pass with V4 testing debt; height string has only a render-only unit assertion
E14	maxWidth constraint	Center.tsx dynamicStyles.sizing	source/type coverage; browser counterfactual is the mutation-sensitive check	Center.doc.mjs maxWidth	neutral-light-max-width-constraint: width 480 constrained to 240	family:layout-primitives/FR1 component:Center/FR3	pass
E15	minHeight constraint	Center.tsx dynamicStyles.sizing	source/type coverage; browser counterfactual is the mutation-sensitive check	Center.doc.mjs minHeight	neutral-light-min-height-constraint: height 80 raised to 220	family:layout-primitives/FR1 component:Center/FR3	pass
E16	uniform padding	Center.tsx padding fallback chain	applies a class when padding is set leaves default output unchanged when omitted	Center.doc.mjs padding Center.stories.tsx Padding	padding-per-edge frames retain uniform padding on non-overridden edges	family:layout-primitives/FR1 family:layout-primitives/FR3 component:Center/FR4	pass
E17	paddingInline and paddingBlock axis overrides	Center.tsx per-axis padding resolution	accepts paddingInline and paddingBlock axis override class-set equivalence	Center.doc.mjs logical axis descriptions	padding-per-edge frames exercise the fallback chain on unaffected edges	family:layout-primitives/FR2 family:layout-primitives/FR3 component:Center/FR4	pass; some legacy unit assertions are render-only; D8 and browser geometry cover logical resolution
E18	four logical edge overrides and precedence	Center.tsx paddingInlineStartStyles, paddingInlineEndStyles, paddingBlockStartStyles, paddingBlockEndStyles	block-start/end precedence inline-start/end precedence resolves all four edges independently	Center.doc.mjs logical edge props Center.stories.tsx PaddingPerEdge	neutral-{light,dark}-{ltr,rtl}-padding-per-edge	family:layout-primitives/FR2 family:layout-primitives/FR3 component:Center/FR4	pass
E19	explicit zero spacing	Center.tsx uses nullish checks so zero is retained	padding={0} paddingBlockEnd={0} paddingInlineEnd={0}	Center.doc.mjs spacing-step unions include 0	padding-per-edge frames record paddingBottom=0	family:layout-primitives/FR1 family:layout-primitives/FR3 component:Center/FR4	pass
E20	logical padding under direction and writing-mode changes	logical StyleX padding properties D8 measureLogicalInlineSubject	writing-mode-aware classifyLogicalInlinePair tests Chromium horizontal and vertical startup self-checks	Center.doc.mjs logical padding wording rtl-audit README D8	LTR/RTL padding-per-edge receipts D8 report records writingMode and top/right/bottom/left	family:layout-primitives/FR2 component:Center/FR4	pass
E21	BaseProps DOM/ARIA passthrough and ref	CenterProps extends BaseProps Center.tsx root composition	passes through additional props forwards ref correctly server render	Center.doc.mjs accessibility guidance component:Center/AR1-AR3	N/A: ref and neutral ARIA/data passthrough are non-visual; collision output is measured separately	architecture:public-component-api/INV5 architecture:public-component-api/INV8	pass
E22	className, style, and xstyle composition	Center.tsx mergeProps and root spread order	public passthrough tests xstyle render-only test	Center.doc.mjs xstyle	Inline and Padding stories apply non-empty xstyle to the Center root	architecture:public-component-api/INV5 architecture:public-component-api/INV6	pass with V4 testing debt; the dedicated xstyle unit case passes undefined; real Storybook compositions supply the behavioral evidence
E23	center theme target and reflected axis	Center.tsx themeProps('center', {axis})	themingTargets.test.ts owned data-axis red-before-green regression	Center.doc.mjs theming.targets	neutral-light-owned-axis-collision plus matrix measurement	architecture:component-theming-surface architecture:public-component-api/INV5 component:Center/FR6	pass after P3 remediation
E24	public CenterHorizontal example	packages/cli/assets/templates/blocks/components/Center/CenterHorizontal.tsx	docsite generation/test CLI structure and component-reference checks	CenterHorizontal.doc.mjs	CenterHorizontal before/after exact-commit pair	rubric X7 component:Center/FR2	pass after example repair; single-axis vertical-writing caveat is explicit
E25	passive content semantics and reading order	Center.tsx renders children unchanged in one div	children, passthrough, server-render, and axe coverage	Center.doc.mjs accessibility best practice component:Center/AR1-AR3	all frames retain caller content order; component-scoped axe has zero violations	component:Center/AR1-AR3 objective accessibility semantics	pass
E26	absence of implicit gap, breakpoint, overflow, region, and bleed publication	Center.tsx has no such branch or public prop	source branch inventory 320px and coarse-pointer browser checks	component:Center/FR5 and FR7 Center.doc.mjs scope guidance	neutral-{light,dark}-{narrow,coarse} with no overflow	family:layout-primitives/FR4,FR7,FR8 architecture:container-padding/INV8	pass

Retained finding

• B15 / family:layout-primitives FR5 / Center draft FR2 — BLOCK: with writing-mode: vertical-rl, axis="horizontal" centers the child vertically (Δx=124px, Δy=0) and axis="vertical" centers it horizontally (Δx=0, Δy=-89px). Current family authority defines these as physical axes. The exact-base and exact-head receipted frames reproduce the same defect; this PR records rather than disguises it.

Rendered evidence

Baseline	Exact head
Light contact sheet	Light contact sheet
Dark contact sheet	Dark contact sheet
Horizontal example before	Horizontal example after
Vertical-writing BLOCK: light · dark	Vertical-writing BLOCK: light · dark

All 17 comparable baseline/exact-head component frames and both vertical-writing frames are byte-identical. The intentional example change has its own exact-commit before/after pair. All 20 receipt pairs match on every sensor except Build. The evidence covers both axis/display matrices, the owned-axis collision, independent 480→240 max-width and 80→220 min-height constraints, asymmetric logical padding, vertical writing, 320px, coarse pointer, neutral light/dark, and matcha light/dark.

Validation

• pnpm vitest run packages/core/src/Center/Center.test.tsx .github/scripts/rtl-audit-coverage.test.mjs packages/core/src/theme/themingTargets.test.ts packages/core/src/docPropLiterals.test.ts packages/core/src/docPropReferences.test.ts — 478/478 pass
• pnpm check:knowledge, pnpm check:sync, pnpm check:changesets, node scripts/check-use-client.mjs, node scripts/sync-exports.js --check — pass
• pnpm -F @astryxdesign/core typecheck, typecheck:docs, Storybook typecheck — pass
• pnpm build — pass
• node scripts/verify-exports.mjs — 10 packages, 46 export targets clean
• pnpm -F @astryxdesign/docsite generate && pnpm -F @astryxdesign/docsite test — 495/495 pass
• pnpm lint:strict — 0 errors; 87 pre-existing warnings, none in changed files
• pnpm a11y:audit -- --components Center — 10 stories, 0 violations
• pnpm rtl:audit -- --filter Center — D8 pass; horizontal-writing and vertical-writing Chromium self-checks pass; 1 measured, 0 failures, 0 gaps
• Exact-head CI run 34497134946 — all required jobs pass
• Real Chromium — 17 baseline + 17 exact-head component frames, two light/dark vertical-writing pairs, and one before/after example pair; all 20 receipt pairs match except Build; visual inspection clean; comparable pixel diff 19/19 identical outside the intentional example correction

Exact-head audit eligibility

{
  "schemaVersion": 1,
  "component": "Center",
  "package": "core",
  "auditMode": "N",
  "rubricVersion": "1.16.2",
  "heads": {
    "repository": "55f51a06c6e1f7780eecb078fa6bf10447579956",
    "componentContract": "55f51a06c6e1f7780eecb078fa6bf10447579956",
    "base": "5447429bacc4baa6b02f70da73dcdb9bb7d6e8ee"
  },
  "inventory": {
    "closed": true,
    "rows": 26,
    "receipt": "pr-assets/evidence-inventory.json",
    "gaps": [
      "B15 / component:Center/FR2: physical one-axis semantics reverse under vertical writing"
    ]
  },
  "unresolvedGaps": {
    "objective": [
      "B15 / component:Center/FR2: physical one-axis semantics reverse under vertical writing"
    ],
    "manual": [
      "The FR2 runtime correction is intentionally outside this audit because a safe fix must preserve DOM, flow, server rendering, and caller-content writing mode",
      "Exact-head owner approval for the draft observational contract"
    ]
  },
  "remediations": [
    {
      "ruleId": "P3",
      "beforeEvidence": [
        "Public Center accepted data-axis=vertical while axis=horizontal and rendered the spoofed value"
      ],
      "afterEvidence": [
        "The public-seam regression test passes with data-axis=horizontal",
        "The receipted collision matrix records the intended input separately and the reflected output changes from vertical at base to horizontal at head"
      ]
    },
    {
      "ruleId": "V3",
      "beforeEvidence": [
        "Axis tests asserted only display:flex and sizing tests asserted only render success"
      ],
      "afterEvidence": [
        "Axis tests assert the public computed alignment contract",
        "An SSR output test proves the server-safe public seam",
        "Max-width 480→240 and min-height 80→220 browser counterfactuals fail if either constraint is dropped"
      ]
    },
    {
      "ruleId": "I17",
      "beforeEvidence": [
        "The component RTL audit reported zero measured and one coverage gap"
      ],
      "afterEvidence": [
        "D8 records writing mode, direction, logical start/end, and all four physical edges",
        "Real Chromium startup checks pass left/right mirroring in horizontal writing and top/bottom mirroring in vertical writing while rejecting a hidden subject",
        "Center reports one measured component and zero coverage gaps"
      ]
    },
    {
      "ruleId": "X7",
      "beforeEvidence": [
        "CenterHorizontal was attributed to Center but rendered no Center"
      ],
      "afterEvidence": [
        "The example renders Center axis=horizontal around the centered control group",
        "Exact-base and exact-head receipts and measurement summaries name their matching commits"
      ]
    }
  ],
  "approvals": [
    {
      "name": "independent-exact-head-review",
      "state": "pass",
      "evidence": "https://github.com/facebook/astryx/pull/6207#issuecomment-5621768713"
    },
    {
      "name": "component-spec-owner",
      "state": "pass",
      "evidence": "https://github.com/facebook/astryx/pull/6207#issuecomment-5621768713"
    },
    {"name": "human-reviewed-merge", "state": "pass"}
  ],
  "checks": [
    {"name": "local-focused", "state": "pass", "assertions": 478},
    {"name": "local-build", "state": "pass"},
    {"name": "a11y", "state": "pass", "stories": 10, "violations": 0},
    {"name": "rtl", "state": "pass", "measured": 1, "gaps": 0},
    {"name": "exact-head-ci", "state": "pass", "run": 34497134946},
    {"name": "audit-eligibility", "state": "unavailable"}
  ],
  "evidence": {
    "componentFrames": {"baseline": 17, "exactHead": 17, "pixelIdentical": 17},
    "verticalWritingFrames": {"baseline": 2, "exactHead": 2, "pixelIdentical": 2},
    "exampleFrames": {
      "baseline": 1,
      "exactHead": 1,
      "intentionalChange": true,
      "baseHead": "5447429bacc4baa6b02f70da73dcdb9bb7d6e8ee",
      "exactHeadCommit": "55f51a06c6e1f7780eecb078fa6bf10447579956"
    },
    "receiptPairs": 20,
    "receiptPairsMatchExceptBuild": 20
  },
  "postMerge": {
    "landedCommit": "f069c04f454e52a4944b32d22dee91fb6fc6214c",
    "reviewedHead": "55f51a06c6e1f7780eecb078fa6bf10447579956",
    "allReviewedPathsIdentical": true,
    "pathCount": 13,
    "receipt": "pr-assets/landed-byte-verification.json"
  },
  "eligibility": {
    "eligible": false,
    "reasons": [
      "spec:AST-029 remains phase: accepted; FR11 activation is absent",
      "The trusted audit-eligibility check is unavailable",
      "One inherited B15 / component:Center/FR2 BLOCK remains open"
    ]
  }
}

Auto-merge is intentionally disabled. This PR must remain open for human review.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
astryx	Ready	Preview	Sep 10, 2026 3:45pm UTC

[astracat-bot]

AI review status for this pull request.

Review status	Updated
🟢 Reviewed (for maintainers only)	Sep 10, 2026, 2:36 PM UTC

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

Center _{(@astryxdesign/core)} · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	118	-
Complexity	N/A	High (22)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.8KB	1.2KB

Accessibility Audit

Status: No accessibility violations detected.

Visual Regression

Status: No visual change across 4 compared shot(s).

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}

[astracat-bot]

Thanks, this is good. Center’s owned axis metadata, public example, and logical-padding RTL coverage all hold at the exact head.

[cixzhang]

/approve-spec 55f51a0