affora 0.1.0

package/src/components/productcard.tsx

@@ -0,0 +1,551 @@
+import type React from 'react';
+import { useId, useState } from 'react';
+
+/**
+ * ProductCard — a hero commerce product tile.
+ *
+ * Authored once and rendered under every Affora theme. Every stylistic value is
+ * a design token (var(--x)) so the same markup reads as tight-dark, warm-rounded,
+ * serif-editorial, structured-enterprise, or bold-expressive without edits.
+ *
+ * Agent-legible substrate (never compromised):
+ *   - <article> with a real <h3> name, price as <data>, a text rating line,
+ *     a <dl>/<dt>/<dd> spec list (Battery/Driver/Weight, all text — never an image),
+ *     a native radio group for size (each <input type=radio> visible-labelled with
+ *     its SKU text), and a real <button> "Add to cart".
+ *   - onCommit(sku) fires when a size is chosen and again on add-to-cart.
+ */
+
+type Size = { code: 'S' | 'M' | 'L'; label: string; sku: string; inStock: boolean };
+
+const SIZES: Size[] = [
+  { code: 'S', label: 'Small', sku: 'SKU-S', inStock: true },
+  { code: 'M', label: 'Medium', sku: 'SKU-M', inStock: true },
+  { code: 'L', label: 'Large', sku: 'SKU-L', inStock: true },
+];
+
+/**
+ * Real-catalogue content. When `window.__affora_product` is set (arm.html reads
+ * `?product=<asin>` from public/real/products.json, a WebShop / Amazon-derived
+ * item), the card carries that item's real name, brand, price, rating, photo and
+ * size options. When it is unset — every measured run — the card renders the
+ * reference content below, byte for byte. The substrate does not change between
+ * the two: same elements, same roles, same fieldset; only the facts do.
+ */
+export type RealProduct = {
+  asin: string; brand: string; name: string; price: number; was: number | null;
+  rating: number | string; reviews: number | string; category?: string;
+  options: Record<string, string[]>; image: string; source: string;
+};
+declare global { interface Window { __affora_product?: RealProduct } }
+const REAL: RealProduct | undefined = typeof window !== 'undefined' ? window.__affora_product : undefined;
+
+const SPECS: { term: string; value: string }[] = [
+  { term: 'Battery', value: '38 h ANC' },
+  { term: 'Driver', value: '40 mm Be' },
+  { term: 'Weight', value: '249 g' },
+];
+
+const realSizes = (r: RealProduct): Size[] => {
+  const group = r.options.Size ?? Object.values(r.options)[0] ?? [];
+  return group.slice(0, 3).map((label) => ({
+    code: label.replace(/^(X{0,2}[SML])[a-z-]*$/i, '$1').slice(0, 4) as Size['code'],
+    // The second line names the scale, not the value: a numeric size is US,
+    // a lettered one is a garment size, and repeating "S" under "S" says nothing.
+    label: /^\d/.test(label) ? 'US' : 'Size',
+    sku: `${r.asin.slice(-4)}-${label.replace(/\s+/g, '')}`, inStock: true,
+  }));
+};
+const savePct = (price: number, was: number | null) => (was && was > price ? Math.round(100 * (1 - price / was)) : 0);
+
+export const ProductCard: React.FC<{ onCommit?: (v: string) => void }> = ({
+  onCommit,
+}) => {
+  const groupName = useId();
+  const sizes = REAL ? realSizes(REAL) : SIZES;
+  const [sku, setSku] = useState<string | null>(null);
+  const [added, setAdded] = useState(false);
+
+  const chooseSize = (next: string) => {
+    setSku(next);
+    setAdded(false);
+    onCommit?.(next);
+  };
+
+  const addToCart = () => {
+    if (!sku) return;
+    setAdded(true);
+    onCommit?.(sku);
+  };
+
+  return (
+    <article className="pcf">
+      <style>{CSS}</style>
+
+      {/* ── Media / hero ─────────────────────────────────────────── */}
+      <div className="pcf__media">
+        {!REAL && <span className="pcf__badge">New</span>}
+        {/* Decorative product illustration — drawn from tokens, not task data. */}
+        {REAL ? (
+          <img className="pcf__art pcf__photo" src={REAL.image} alt={REAL.name} />
+        ) : (
+        <svg
+          className="pcf__art"
+          viewBox="0 0 120 120"
+          role="img"
+          aria-label="Aurora One wireless headphones"
+        >
+          <path
+            d="M22 66V58a38 38 0 0 1 76 0v8"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="5"
+            strokeLinecap="round"
+          />
+          <rect x="14" y="62" width="20" height="34" rx="9" className="pcf__art-cup" />
+          <rect x="86" y="62" width="20" height="34" rx="9" className="pcf__art-cup" />
+        </svg>
+        )}
+      </div>
+
+      {/* ── Identity ─────────────────────────────────────────────── */}
+      <div className="pcf__head">
+        <p className="pcf__brand">{REAL ? REAL.brand : 'Aurora Audio'}</p>
+        <h3 className="pcf__name">{REAL ? REAL.name : 'Aurora One Wireless Headphones'}</h3>
+        <p className="pcf__rating">
+          <svg className="pcf__star" viewBox="0 0 20 20" aria-hidden="true">
+            <path
+              d="M10 1.6l2.47 5 5.53.8-4 3.9.94 5.5L10 14.2 5.06 16.8 6 11.3l-4-3.9 5.53-.8z"
+              fill="currentColor"
+            />
+          </svg>
+          <span className="pcf__rating-num">{REAL ? String(REAL.rating) : '4.6'}</span>
+          <span className="pcf__dot" aria-hidden="true">
+            ·
+          </span>
+          <span className="pcf__reviews">{REAL ? `${REAL.reviews} reviews` : '128 reviews'}</span>
+        </p>
+      </div>
+
+      {/* ── Price ────────────────────────────────────────────────── */}
+      <p className="pcf__price-row">
+        <data className="pcf__price" value={REAL ? REAL.price.toFixed(2) : '129.00'}>
+          ${REAL ? REAL.price.toFixed(2) : '129.00'}
+        </data>
+        {(!REAL || REAL.was) && (
+          <data className="pcf__was" value={REAL && REAL.was ? REAL.was.toFixed(2) : '169.00'}>
+            ${REAL && REAL.was ? REAL.was.toFixed(2) : '169.00'}
+          </data>
+        )}
+        {(!REAL || savePct(REAL.price, REAL.was) > 0) && (
+          <span className="pcf__save">Save {REAL ? savePct(REAL.price, REAL.was) : 24}%</span>
+        )}
+      </p>
+
+      {/* ── Specs (text only, never an image) ────────────────────── */}
+      <dl className="pcf__specs">
+        {(REAL ? [{ term: 'Brand', value: REAL.brand.split(' ')[0] }, { term: 'Sizes', value: `${(REAL.options.Size ?? []).length || Object.values(REAL.options)[0]?.length || 0} listed` }, { term: 'Colors', value: `${(REAL.options.Color ?? []).length || 1} listed` }] : SPECS).map((s) => (
+          <div className="pcf__spec" key={s.term}>
+            <dt className="pcf__spec-term">{s.term}</dt>
+            <dd className="pcf__spec-val">{s.value}</dd>
+          </div>
+        ))}
+      </dl>
+
+      {/* ── Size selector (real radio group) ─────────────────────── */}
+      <fieldset className="pcf__sizes">
+        <legend className="pcf__sizes-legend">
+          Fit
+          <span className="pcf__sizes-hint">{sku ? `SKU ${sku}` : 'Select a fit'}</span>
+        </legend>
+        <div className="pcf__seg" role="radiogroup" aria-label="Fit">
+          {sizes.map((s) => (
+            <label
+              key={s.sku}
+              className="pcf__opt"
+              data-active={sku === s.sku || undefined}
+              data-oos={!s.inStock || undefined}
+            >
+              <input
+                className="pcf__radio"
+                type="radio"
+                name={groupName}
+                value={s.sku}
+                aria-label={`${s.inStock ? s.label : `${s.label} (sold out)`} — ${s.sku}`}
+                checked={sku === s.sku}
+                disabled={!s.inStock}
+                onChange={() => chooseSize(s.sku)}
+              />
+              <span className="pcf__opt-code">{s.code}</span>
+              <span className="pcf__opt-label">{s.inStock ? s.label : 'Sold out'}</span>
+              <span className="pcf__opt-sku">{s.sku}</span>
+            </label>
+          ))}
+        </div>
+      </fieldset>
+
+      {/* ── Commit ───────────────────────────────────────────────── */}
+      <button
+        type="button"
+        className="pcf__cta"
+        onClick={addToCart}
+        disabled={!sku}
+        aria-disabled={!sku}
+        data-added={added || undefined}
+      >
+        <svg className="pcf__cart" viewBox="0 0 20 20" aria-hidden="true">
+          {added ? (
+            <path
+              d="M4 10.5l3.5 3.5L16 6"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          ) : (
+            <path
+              d="M3 3h2l1.2 9.2a1.6 1.6 0 0 0 1.6 1.4h6.6a1.6 1.6 0 0 0 1.6-1.3L17.5 6H6M8 17.5a1 1 0 1 0 0 .01M15 17.5a1 1 0 1 0 0 .01"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.6"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          )}
+        </svg>
+        <span>{added ? 'Added to cart' : sku ? 'Add to cart' : 'Choose a fit'}</span>
+      </button>
+    </article>
+  );
+};
+
+export const CSS = `
+/* A photograph arrives on its own white ground, which reads as a white box inside
+   a tinted media pane; multiplying it into the pane drops that ground. A drawn
+   SVG has no ground to drop, so it is left alone. */
+.pcf__photo { width: 100%; height: 100%; object-fit: contain; display: block;
+  mix-blend-mode: multiply; padding: 0; }
+.pcf__photo[src$=".svg"] { mix-blend-mode: normal; width: 72%; height: auto; margin: 0 auto; }
+.pcf {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--lay-width, 360px);
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--gap) * var(--lay-density, 1));
+  padding: calc(var(--pad-loose) * var(--lay-density, 1));
+  background: var(--glass-bg, var(--surface));
+  backdrop-filter: var(--glass-blur, none);
+  -webkit-backdrop-filter: var(--glass-blur, none);
+  color: var(--fg);
+  border: 1px solid var(--glass-border, var(--border));
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  font-family: var(--font);
+  font-size: var(--text-base);
+  font-weight: var(--weight-normal);
+  line-height: var(--leading);
+  letter-spacing: var(--tracking-tight);
+  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
+    border-color var(--dur) var(--ease);
+}
+/* commerce layout: media pane beside the buying controls. Achieved with
+   flex-wrap over the SAME children in the SAME DOM order — no reordering. */
+[data-layout="commerce"] .pcf {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+[data-layout="commerce"] .pcf__media {
+  flex: 0 0 44%;
+  align-self: stretch;
+}
+[data-layout="commerce"] .pcf__head,
+[data-layout="commerce"] .pcf__price-row,
+[data-layout="commerce"] .pcf__specs,
+[data-layout="commerce"] .pcf__sizes,
+[data-layout="commerce"] .pcf__cta { flex: 1 1 46%; }
+
+.pcf *,
+.pcf *::before,
+.pcf *::after { box-sizing: border-box; }
+.pcf:hover {
+  box-shadow: var(--shadow-lg);
+  border-color: var(--border-strong);
+}
+
+/* ── Media ── */
+.pcf__media {
+  position: relative;
+  display: var(--lay-media, grid);
+  place-items: center;
+  aspect-ratio: 16 / 10;
+  border-radius: var(--radius);
+  color: var(--accent);
+  background:
+    radial-gradient(120% 120% at 50% 0%, var(--accent-weak), transparent 70%),
+    var(--surface-2);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+.pcf__art {
+  width: 62%;
+  height: auto;
+  filter: drop-shadow(var(--shadow-sm));
+  transition: transform var(--dur) var(--ease-emphasis);
+}
+.pcf:hover .pcf__art { transform: translateY(-3px) scale(1.03); }
+.pcf__art-cup { fill: var(--accent); }
+.pcf__badge {
+  position: absolute;
+  top: var(--pad-tight);
+  left: var(--pad-tight);
+  padding: 2px var(--pad-tight);
+  font-family: var(--font-mono);
+  font-size: calc(var(--text-base) * 0.7);
+  font-weight: var(--weight-medium);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--accent-fg);
+  background: var(--accent);
+  border-radius: var(--radius-full);
+}
+
+/* ── Identity ── */
+.pcf__head { display: flex; flex-direction: column; gap: calc(var(--gap) * 0.25); }
+.pcf__brand {
+  margin: 0;
+  font-size: calc(var(--text-base) * 0.78);
+  font-weight: var(--weight-medium);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fg-subtle);
+}
+.pcf__name {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: calc(var(--text-base) * var(--scale-ratio) * var(--scale-ratio));
+  font-weight: var(--weight-display);
+  line-height: 1.15;
+  letter-spacing: var(--tracking-tight);
+  color: var(--fg);
+  text-wrap: balance;
+}
+.pcf__rating {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--gap) * 0.4);
+  margin: calc(var(--gap) * 0.25) 0 0;
+  font-size: calc(var(--text-base) * 0.9);
+  color: var(--fg-muted);
+}
+.pcf__star { width: 1em; height: 1em; color: var(--warning); flex: none; }
+.pcf__rating-num {
+  font-weight: var(--weight-bold);
+  color: var(--fg);
+  font-variant-numeric: tabular-nums;
+}
+.pcf__dot { color: var(--fg-subtle); }
+.pcf__reviews { font-variant-numeric: tabular-nums; }
+
+/* ── Price ── */
+.pcf__price-row {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: calc(var(--gap) * 0.6);
+  margin: 0;
+}
+.pcf__price {
+  font-family: var(--font-display);
+  font-size: calc(var(--text-base) * 1.7);
+  font-weight: var(--weight-bold);
+  color: var(--fg);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: var(--tracking-tight);
+}
+.pcf__was {
+  font-size: calc(var(--text-base) * 0.95);
+  color: var(--fg-subtle);
+  text-decoration: line-through;
+  font-variant-numeric: tabular-nums;
+}
+.pcf__save {
+  padding: 1px var(--pad-tight);
+  font-size: calc(var(--text-base) * 0.72);
+  font-weight: var(--weight-bold);
+  letter-spacing: 0.02em;
+  color: var(--success);
+  background: color-mix(in srgb, var(--success) 14%, transparent);
+  border-radius: var(--radius-full);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Specs ── */
+.pcf__specs {
+  display: grid;
+  grid-template-columns: repeat(var(--lay-cols, 3), minmax(0, 1fr));
+  gap: var(--gap);
+  margin: 0;
+  padding: var(--pad);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+.pcf__spec { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.pcf__spec-term {
+  font-size: min(calc(var(--text-base) * 0.72), 11px);
+  font-weight: var(--weight-medium);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--fg-subtle);
+}
+.pcf__spec-val {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: min(calc(var(--text-base) * 0.9), 13px);
+  font-weight: var(--weight-medium);
+  color: var(--fg);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* ── Size selector ── */
+.pcf__sizes { margin: 0; padding: 0; border: 0; min-width: 0; }
+.pcf__sizes-legend {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--gap);
+  width: 100%;
+  padding: 0;
+  margin-bottom: calc(var(--gap) * 0.6);
+  font-size: calc(var(--text-base) * 0.78);
+  font-weight: var(--weight-bold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--fg);
+}
+.pcf__sizes-hint {
+  font-family: var(--font-mono);
+  font-size: calc(var(--text-base) * 0.72);
+  font-weight: var(--weight-normal);
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--fg-subtle);
+}
+.pcf__seg { display: grid; grid-template-columns: repeat(var(--lay-cols, 3), minmax(0, 1fr)); gap: calc(var(--gap) * 0.5); }
+.pcf__opt {
+  position: relative;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  padding: var(--pad-tight);
+  text-align: center;
+  cursor: pointer;
+  color: var(--fg-muted);
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  transition: border-color var(--dur-fast) var(--ease),
+    background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease);
+}
+.pcf__opt:hover:not([data-oos]) { border-color: var(--accent); color: var(--fg); }
+.pcf__opt[data-active] {
+  color: var(--accent-fg);
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.pcf__opt[data-active] .pcf__opt-label,
+.pcf__opt[data-active] .pcf__opt-sku { color: var(--accent-fg); opacity: 0.85; }
+.pcf__opt[data-oos] {
+  cursor: not-allowed;
+  opacity: 0.55;
+  background: var(--surface-2);
+  border-style: dashed;
+}
+.pcf__opt:has(.pcf__radio:focus-visible) {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+.pcf__radio {
+  /* Cover the whole chip so the operable target is where it visibly is:
+     the mark/badge lands on the chip center and a pixel click hits the input
+     directly — not the 1px hidden-control anti-pattern (cf. React Aria, §4c). */
+  position: absolute;
+  inset: 0;
+  width: 100%; height: 100%;
+  opacity: 0;
+  margin: 0;
+  cursor: pointer;
+}
+.pcf__opt[data-oos] .pcf__radio { cursor: not-allowed; }
+.pcf__opt-code {
+  font-family: var(--font-display);
+  font-size: calc(var(--text-base) * 1.05);
+  font-weight: var(--weight-bold);
+  line-height: 1.1;
+  color: inherit;
+}
+.pcf__opt-label {
+  font-size: calc(var(--text-base) * 0.72);
+  font-weight: var(--weight-medium);
+  color: var(--fg-muted);
+}
+.pcf__opt-sku {
+  font-family: var(--font-mono);
+  font-size: calc(var(--text-base) * 0.6);
+  letter-spacing: -0.02em;
+  color: var(--fg-subtle);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── CTA ── */
+.pcf__cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--gap) * 0.5);
+  width: 100%;
+  padding: var(--pad) var(--pad-loose);
+  font-family: var(--font);
+  font-size: calc(var(--text-base) * 1.02);
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--tracking-tight);
+  color: var(--accent-fg);
+  background: var(--accent);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  transition: transform var(--dur-fast) var(--ease-emphasis),
+    box-shadow var(--dur) var(--ease), background var(--dur) var(--ease),
+    opacity var(--dur) var(--ease);
+}
+.pcf__cta:hover:not(:disabled) { box-shadow: var(--shadow); transform: translateY(-1px); }
+.pcf__cta:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-sm); }
+.pcf__cta:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.pcf__cta:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+  color: var(--fg-subtle);
+  background: var(--surface-2);
+  border-color: var(--border-strong);
+  box-shadow: none;
+}
+.pcf__cta[data-added] { background: var(--success); border-color: var(--success); color: #fff; }
+.pcf__cart { width: 1.15em; height: 1.15em; flex: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .pcf, .pcf *, .pcf *::before, .pcf *::after { transition: none !important; }
+}
+`;
+
+export default ProductCard;