chore(slice-3): version 0.3, README status, label-input association fix (a11y §6.6)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

README.md

@@ -20,10 +20,12 @@ This app (One Name `ecomm`, see [`app.json`](./app.json)) is composed of:
 
 ## Status
 
-SLICE-2 (identity) of SD-0001 is in place on top of the SLICE-1 skeleton: open,
-passwordless sign-up/log-in by email + one-time code (`accounts` domain, INV-2/INV-3),
-signed-cookie sessions, the `/api/auth/*` endpoints (`request-code`, `verify`, `me`,
-`logout`), the `platform/mailer` port with `LogMailer` (the dev code channel), and the
-Landing + Sign-in screens with the entry-routing rule (storefront hard-wired `null` until
-SLICE-3). See [`docs/BOOTSTRAP.md`](./docs/BOOTSTRAP.md) to run it locally. The storefront
-(SLICE-3) and deployed environments (SLICE-4) are next.
+SLICE-3 (storefront) of SD-0001 is in place on top of SLICE-1/2: the `storefronts`
+domain (create + owner membership, INV-4's one-storefront guard with concurrent-create
+refusal), `POST /api/storefronts`, the Create-storefront and Admin-shell screens, the
+complete entry-routing rule (landing / create-storefront / admin), and the INV-1
+whole-flow bootstrap test — all skinned to the Claude Design export
+(`wiggleverse-ecomm-content/ui/designs/ecomm-login-and-create-storefront-designs/`),
+which also re-skinned the SLICE-2 Landing + Sign-in screens. See
+[`docs/BOOTSTRAP.md`](./docs/BOOTSTRAP.md) to run it locally. Deployed environments
+(SLICE-4) are next.

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wiggleverse-ecomm-frontend",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/ui/kit.tsx

@@ -1,6 +1,7 @@
 // The ecomm UI kit — React faces of the app.css primitives, matching the Claude Design
 // export (ui/designs/ecomm-login-and-create-storefront-designs, hf-kit). Presentation
 // only: no business rules live here (§6.2 — the SPA renders what the BFF returns).
+import { useId } from "react";
 import type { ReactNode } from "react";
 
 export function Screen({
@@ -110,13 +111,15 @@ export function Field({
   helper?: string;
   inputProps: React.InputHTMLAttributes<HTMLInputElement>;
 }) {
+  const id = useId();
   return (
     <div className="field">
-      <label className="field__label">
+      <label className="field__label" htmlFor={id}>
         <span>{label}</span>
         {optional && <span className="field__optional">optional</span>}
       </label>
       <input
+        id={id}
         className={`field__input${error ? " field__input--error" : ""}`}
         aria-invalid={!!error}
         {...inputProps}