feat: harden test and registry evidence

src/bootstrap/main.jsx

@@ -20,6 +20,8 @@ const root = createRoot(rootElement);
 async function boot() {
   try {
     const composition = await createRuntimeComposition();
+    document.documentElement.dataset.buildId = composition.release.buildId;
+    document.documentElement.dataset.releaseId = composition.release.releaseId;
     initializeColorScheme(composition.application.preferences);
     root.render(<RuntimeApplication composition={composition} />);
   } catch (error) {

src/contracts/schema-registry.js

@@ -0,0 +1,27 @@
+/**
+ * @typedef {{
+ *   schemaId: string,
+ *   boundary: "route-params" | "route-search" |
+ *     "route-search-api-request" | "api-request" | "api-response",
+ *   owner: string,
+ *   runtime: "zod"
+ * }} SchemaDefinition
+ */
+
+export const PLATFORM_SCHEMA_REGISTRY =
+  /** @type {Readonly<Record<string, Readonly<SchemaDefinition>>>} */ (
+    Object.freeze({
+      none: Object.freeze({
+        schemaId: "none",
+        boundary: "route-params",
+        owner: "feature-frontend-routing-release-recovery-runtime",
+        runtime: "zod",
+      }),
+      NotFoundSplat: Object.freeze({
+        schemaId: "NotFoundSplat",
+        boundary: "route-params",
+        owner: "feature-frontend-routing-release-recovery-runtime",
+        runtime: "zod",
+      }),
+    })
+  );

src/features/installed-feature-contracts.js

@@ -1,5 +1,6 @@
 import { PLATFORM_ROUTE_RUNTIME_CONTRACT } from "../contracts/route-runtime-contract.js";
 import { PLATFORM_ROUTE_REGISTRY } from "../contracts/routes.js";
+import { PLATFORM_SCHEMA_REGISTRY } from "../contracts/schema-registry.js";
 import { REFERENCE_FEATURE_CONTRACT } from "./reference-feature/contracts/reference-feature-contract.js";
 
 export const INSTALLED_FEATURE_CONTRACTS = Object.freeze([
@@ -20,6 +21,10 @@ export const API_OPERATIONS = Object.freeze({
 export const QUERY_REGISTRY = Object.freeze({
   ...REFERENCE_FEATURE_CONTRACT.queryRegistry,
 });
+export const SCHEMA_REGISTRY = Object.freeze({
+  ...PLATFORM_SCHEMA_REGISTRY,
+  ...REFERENCE_FEATURE_CONTRACT.schemas,
+});
 
 export const NAVIGATION_ROUTES = Object.freeze(
   Object.values(ROUTE_REGISTRY)

src/features/reference-feature/contracts/reference-feature-contract.js

@@ -14,6 +14,44 @@ export const referenceQueryKeys = Object.freeze({
 
 export const REFERENCE_FEATURE_CONTRACT = Object.freeze({
   featureId: REFERENCE_FEATURE_ID,
+  schemas: Object.freeze({
+    ReferenceResourceParams: Object.freeze({
+      schemaId: "ReferenceResourceParams",
+      boundary: "route-params",
+      owner: "feature-frontend-reference-feature-vertical-slice",
+      runtime: "zod",
+    }),
+    ReferenceResourceListQuery: Object.freeze({
+      schemaId: "ReferenceResourceListQuery",
+      boundary: "route-search-api-request",
+      owner: "feature-frontend-reference-feature-vertical-slice",
+      runtime: "zod",
+    }),
+    CreateReferenceResourceCommand: Object.freeze({
+      schemaId: "CreateReferenceResourceCommand",
+      boundary: "api-request",
+      owner: "feature-frontend-reference-feature-vertical-slice",
+      runtime: "zod",
+    }),
+    NoRequest: Object.freeze({
+      schemaId: "NoRequest",
+      boundary: "api-request",
+      owner: "feature-frontend-reference-feature-vertical-slice",
+      runtime: "zod",
+    }),
+    ReferenceResourceListPayload: Object.freeze({
+      schemaId: "ReferenceResourceListPayload",
+      boundary: "api-response",
+      owner: "feature-frontend-reference-feature-vertical-slice",
+      runtime: "zod",
+    }),
+    ReferenceResourcePayload: Object.freeze({
+      schemaId: "ReferenceResourcePayload",
+      boundary: "api-response",
+      owner: "feature-frontend-reference-feature-vertical-slice",
+      runtime: "zod",
+    }),
+  }),
   routes: Object.freeze({
     REFERENCE_RESOURCE_LIST: Object.freeze({
       routeId: "REFERENCE_RESOURCE_LIST",

src/features/reference-feature/contracts/reference-schemas.ts

@@ -39,6 +39,7 @@ const payloadSchemas = {
 
 const requestSchemas = {
   ReferenceResourceListQuery: referenceResourceListQuerySchema,
+  NoRequest: z.object({}).strict(),
   CreateReferenceResourceCommand: z
     .object({
       name: z.string().trim().min(1).max(120),

src/presentation/design-system/design-system.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { useState } from "react";
+
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  Dialog,
+  Menu,
+  ProgressBar,
+  Skeleton,
+  Tabs,
+  TextArea,
+  TextField,
+} from "./index.js";
+
+const meta = {
+  title: "Platform/Design System",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primitives: Story = {
+  render: () => (
+    <div className="ui-stack">
+      <Card title="Actions and status">
+        <div className="ui-cluster">
+          <Button>Primary</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button variant="danger">Danger</Button>
+          <Button pending pendingLabel="Processing">
+            Save
+          </Button>
+        </div>
+        <div className="ui-cluster">
+          <Badge variant="neutral">Neutral</Badge>
+          <Badge variant="success">Success</Badge>
+          <Badge variant="warning">Warning</Badge>
+          <Badge variant="danger">Danger</Badge>
+        </div>
+      </Card>
+      <TextField
+        description="A stable accessible description"
+        label="Name"
+        placeholder="Example"
+      />
+      <TextField error="Enter a name" label="Invalid name" value="" readOnly />
+      <TextArea
+        defaultValue="Long-form content"
+        label="Notes"
+        maxLength={100}
+      />
+      <Alert title="Platform status" variant="info">
+        The component workshop uses the same tokens and providers as the app.
+      </Alert>
+      <ProgressBar label="Build readiness" value={72} />
+      <Skeleton label="Loading example" />
+    </div>
+  ),
+};
+
+function OverlayExample() {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="ui-stack">
+      <Button onClick={() => setOpen(true)}>Open dialog</Button>
+      <Dialog
+        actions={<Button onClick={() => setOpen(false)}>Confirm</Button>}
+        onClose={() => setOpen(false)}
+        open={open}
+        title="Confirm platform action"
+      >
+        Keyboard dismissal must restore focus to the trigger.
+      </Dialog>
+      <Menu
+        items={[
+          { id: "first", label: "First action", onSelect() {} },
+          { id: "second", label: "Second action", onSelect() {} },
+        ]}
+        triggerLabel="Open menu"
+      />
+      <Tabs
+        defaultValue="one"
+        label="Example sections"
+        tabs={[
+          { id: "one", label: "One", panel: "First panel" },
+          { id: "two", label: "Two", panel: "Second panel" },
+        ]}
+      />
+    </div>
+  );
+}
+
+export const OverlayInteraction: Story = {
+  render: () => <OverlayExample />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button", { name: "Open dialog" });
+    await userEvent.click(trigger);
+    const dialog = within(document.body).getByRole("dialog", {
+      name: "Confirm platform action",
+    });
+    await expect(dialog).toBeVisible();
+    await userEvent.keyboard("{Escape}");
+    await expect(dialog).not.toBeVisible();
+    await expect(trigger).toHaveFocus();
+  },
+};
+
+export const LongPseudoLikeContent: Story = {
+  render: () => (
+    <Card title="[!! Ćømƥøñëñţ ţøķëñ åñđ ļøñğ ţëжţ vëŕïƒïćåţïøñ !!]">
+      <p>
+        [!! Ţhïš šţøŕÿ vëŕïƒïëš ţhåţ å ƥŕïmïţïvë ŕëmåïñš ŕëåđåɓļë
+        ïñ å ćømƥåćţ ćøñţåïñëŕ. !!]
+      </p>
+      <Button>[!! Ćøñţïñüë !!]</Button>
+    </Card>
+  ),
+};