lanre-ds 0.1.0 → 0.2.1

package/components/contributor/RadioCard.jsx

@@ -1,22 +1,18 @@
 'use client';
-import React, { useState } from 'react';
+import React from 'react';
 
 const DROP = '0 14px 24px oklch(0.22 0.05 60 / 0.3)';
 const GLOW = '0 0 0 4px oklch(0.76 0.13 180 / 0.5), 0 0 28px oklch(0.76 0.13 180 / 0.6)';
 
-export function RadioCard({ checked = false, onChange, onClick, onPointerDown, onPointerUp, onPointerCancel, onPointerLeave, title, description, media, style, ...rest }) {
-  const [down, setDown] = useState(false);
-  // Your own handlers run alongside the card's, so passing one never breaks choosing or the press.
-  const press = (on, yours) => e => { setDown(on); if (yours) yours(e); };
+export function RadioCard({ checked = false, onChange, onClick, title, description, media, style, className, ...rest }) {
   return (
-    <button type="button" role="radio" aria-checked={checked} onClick={e => { if (onClick) onClick(e); if (onChange) onChange(true); }}
-      onPointerDown={press(true, onPointerDown)} onPointerUp={press(false, onPointerUp)} onPointerCancel={press(false, onPointerCancel)} onPointerLeave={press(false, onPointerLeave)}
+    <button type="button" role="radio" aria-checked={checked} className={'mp-radio-card' + (className ? ' ' + className : '')} onClick={e => { if (onClick) onClick(e); if (onChange) onChange(true); }}
       style={{ appearance: 'none', position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, padding: '22px 12px 16px', boxSizing: 'border-box',
         borderRadius: 'var(--radius-lg)', border: '4px solid ' + (checked ? 'var(--teal-500)' : 'var(--cream-300)'),
         background: checked ? 'linear-gradient(180deg, var(--teal-100), #fff)' : 'linear-gradient(180deg, #fff, var(--cream-100))',
         boxShadow: checked ? '0 5px 0 var(--teal-700), ' + DROP + ', ' + GLOW : '0 5px 0 var(--cream-300), ' + DROP,
         font: 'inherit', textAlign: 'center', cursor: 'pointer', WebkitTapHighlightColor: 'transparent',
-        transition: 'transform var(--dur-fast) var(--ease-out)', transform: down ? 'translateY(3px)' : undefined, ...style }} {...rest}>
+        transition: 'transform var(--dur-fast) var(--ease-out)', ...style }} {...rest}>
       <span aria-hidden="true" style={{ position: 'absolute', right: 10, top: 10, width: 28, height: 28, boxSizing: 'border-box', borderRadius: '50%',
         border: '3px solid ' + (checked ? 'var(--teal-500)' : 'var(--stone-500)'), background: checked ? 'var(--teal-500)' : '#fff', boxShadow: 'inset 0 2px 3px oklch(0 0 0 / 0.1)',
         display: 'grid', placeItems: 'center', color: '#fff', fontSize: 14, animation: checked ? 'mp-radio-pop var(--dur-base) var(--ease-bounce) both' : undefined }}>

package/components/contributor/StepBar.jsx

@@ -25,16 +25,15 @@ export function StepBar({ steps = [], current = 0, labels = false, style, ...res
       <div style={{ position: 'relative' }}>
         <span aria-hidden="true" style={{ position: 'absolute', top: 12, left: slot / 2, right: slot / 2, height: 12, borderRadius: 999,
           background: 'var(--world-path)', boxShadow: '0 0 0 3px var(--world-path-edge), 0 4px 0 3px oklch(0.25 0.05 60 / 0.2)' }} />
-        <span aria-hidden="true" style={{ position: 'absolute', top: 16, left: slot / 2, width: slot * filled, height: 4, borderRadius: 999,
+        <span aria-hidden="true" className={advanced ? 'mp-trail-fill-grow' : undefined} style={{ position: 'absolute', top: 16, left: slot / 2, width: slot * filled, height: 4, borderRadius: 999,
           background: 'var(--green-500)', transition: 'width var(--dur-slow) var(--ease-out)',
-          ...(advanced ? { '--from': slot * Math.min(current - 1, filled) + 'px', '--to': slot * filled + 'px', animation: 'mp-trail-grow var(--dur-slow) var(--ease-out) 260ms both' } : null) }} />
+          ...(advanced ? { '--from': slot * Math.min(current - 1, filled) + 'px', '--to': slot * filled + 'px' } : null) }} />
         <ol style={{ position: 'relative', listStyle: 'none', margin: 0, padding: 0, display: 'flex' }}>
           {steps.map((label, i) => {
             const done = i < current, cur = i === current, justDone = advanced && i === current - 1;
             return (
               <li key={i} aria-current={cur ? 'step' : undefined} style={{ width: slot, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
-                <span aria-hidden="true" className={'mp-step' + (done ? ' mp-step-done' : cur ? ' mp-step-current' : '')}
-                  style={justDone ? { animation: 'mp-pop var(--dur-slow) var(--ease-bounce) 560ms both' } : undefined}>
+                <span aria-hidden="true" className={'mp-step' + (done ? ' mp-step-done' : cur ? ' mp-step-current' : '') + (justDone ? ' mp-step-pop' : '')}>
                   {done ? <i className="ph-bold ph-check" /> : i + 1}
                   {cur && <span style={{ position: 'absolute', inset: -4, borderRadius: '50%', animation: 'mp-pulse-ring 1.6s ease-out infinite' }} />}
                 </span>

package/components/map/PortraitMedallion.jsx

@@ -1,51 +1,29 @@
 'use client';
-import React, { useState } from 'react';
+import React from 'react';
 import { Avatar } from '../identity/Avatar';
 
+/* A completed level on the map: the friend on a gold pedestal, with the level number on a plate underneath. Give it
+   onClick and it becomes a button that replays the level, with a press, a hover and a keyboard focus ring. The pedestal's
+   shadow and the number plate are the same at every size. */
 export function PortraitMedallion({ name = '', seed, src, number, size = 84, pop = false, onClick, label, style, ...rest }) {
-  const [down, setDown] = useState(false);
-  const [hover, setHover] = useState(false);
   const interactive = typeof onClick === 'function';
-  const pressed = interactive && down;
-  const depth = Math.max(4, Math.round(size / 12)), travel = depth - 2;
-  const plate = { h: Math.round(size * 0.36), min: Math.round(size * 0.43), fs: Math.round(size * 0.2) };
   const who = name || 'a friend';
   const accessibleName = label || (interactive
     ? (number != null ? 'Replay level ' + number + ', ' + who : 'Replay surprise from ' + who)
     : (number != null ? 'Level ' + number + ', ' + who : name || 'A friend'));
-  const body = (
-    <>
-      <span aria-hidden="true" style={{
-        display: 'grid', placeItems: 'center', width: size, height: size, borderRadius: '50%',
-        background: 'radial-gradient(circle at 50% 30%, var(--gold-300), var(--gold-500) 60%, var(--gold-700))',
-        boxShadow: '0 ' + (pressed ? 2 : depth) + 'px 0 var(--gold-900), 0 ' + (pressed ? 6 : depth * 2) + 'px ' + (pressed ? 10 : 18) + 'px oklch(0.2 0.05 60 / 0.35), inset 0 3px 0 oklch(1 0 0 / 0.6)',
-        transform: pressed ? 'translateY(' + travel + 'px)' : 'none',
-        filter: hover && !pressed ? 'brightness(1.06)' : 'none',
-        transition: 'transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast)',
-      }}>
+  const medallion = (
+    <span className={'mp-medallion' + (pop ? ' mp-medallion-pop' : '')} style={{ '--m': size + 'px', ...(interactive ? null : style) }}
+      {...(interactive ? null : { role: 'img', 'aria-label': accessibleName, ...rest })}>
+      <span className="mp-medallion-ring">
         <Avatar name={name} seed={seed} src={src} size={Math.round(size * 0.8)} alt="" />
       </span>
-      {number != null && (
-        <span aria-hidden="true" style={{
-          position: 'relative', zIndex: 1, marginTop: -Math.round(size * 0.17), minWidth: plate.min, height: plate.h, padding: '0 ' + Math.round(plate.h / 3) + 'px', boxSizing: 'border-box',
-          borderRadius: 'var(--radius-pill)', background: 'linear-gradient(180deg, #fff, var(--cream-100))', boxShadow: '0 3px 0 var(--cream-300), 0 6px 10px oklch(0 0 0 / 0.2)',
-          fontFamily: 'var(--font-display)', fontSize: plate.fs, lineHeight: plate.h + 'px', color: 'var(--ink-900)', textAlign: 'center',
-          transform: pressed ? 'translateY(' + (travel - 1) + 'px)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)',
-        }}>{number}</span>
-      )}
-    </>
+      {number != null && <span className="mp-medallion-number">{number}</span>}
+    </span>
   );
-  const frame = {
-    position: 'relative', display: 'inline-grid', justifyItems: 'center', width: size,
-    animation: pop ? 'mp-medallion-pop 900ms var(--ease-out) both' : undefined,
-  };
-  if (!interactive) return <span role="img" aria-label={accessibleName} style={{ ...frame, ...style }} {...rest}>{body}</span>;
+  if (!interactive) return medallion;
   return (
-    <button type="button" aria-label={accessibleName} onClick={onClick}
-      onPointerDown={() => setDown(true)} onPointerUp={() => setDown(false)} onPointerCancel={() => setDown(false)}
-      onPointerEnter={() => setHover(true)} onPointerLeave={() => { setDown(false); setHover(false); }}
-      style={{ appearance: 'none', background: 'none', border: 0, margin: 0, padding: 0, cursor: 'pointer', borderRadius: 'var(--radius-pill)', WebkitTapHighlightColor: 'transparent', ...frame, ...style }} {...rest}>
-      {body}
+    <button type="button" className="mp-medallion-button" aria-label={accessibleName} onClick={onClick} style={style} {...rest}>
+      {medallion}
     </button>
   );
 }

package/components/map/PortraitMedallion.prompt.md

@@ -11,3 +11,4 @@ Portrait medallion: what a completed level becomes on the map. The revealed frie
 - Keep the replay label readable: it defaults to "Replay level 4, Ada Okafor". Pass `label` to change the wording, never to remove the name.
 - `pop` plays the arrival once. Set it only for the level that was just finished.
 - Same size as the `LevelNode` it replaces (84 by default), so the road doesn't shift.
+- The pedestal's shadow and the number plate are the same at every size, so a small medallion for a discovery has the same bevel as a big one. It is a real button when it has `onClick`, with a hover, a press and a keyboard focus ring.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lanre-ds",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Lanre: a design system for a casual exploration game. React components and CSS tokens.",
   "license": "MIT",
   "keywords": [

package/readme.md

@@ -119,7 +119,7 @@ Source: the shared build brief (12 Sep 2026). The generic Lanre kit above is the
 - `tokens/viewer.css`: the styles behind the viewer (`.mp-viewer`, `.mp-cabinet`, `.mp-keys`, `.mp-knob`, `.mp-tray`). It sets sizes for phones, iPad and desktop.
 - **Package:** `package.json` makes the repo an installable package, `lanre-ds`: `import 'lanre-ds/styles.css'`, then `import { Button } from 'lanre-ds/components/buttons/Button'`. See the docs page *Install it in an app*. It is published on npm and licensed MIT.
 - `tokens/fx.css`: the styles behind the effects and the boot screen (`.mp-confetti`, `.mp-sparkle-spot`, `.mp-sunburst-motion`, `.mp-loading`).
-- `tokens/ui.css`: the styles behind the small pieces (`.mp-heading`, `.mp-sticker`, `.mp-notice`, `.mp-error-text`, `.mp-save-pill`, `.mp-save-alert`, `.mp-avatar-button`, `.mp-seg`, `.mp-recorder`).
+- `tokens/ui.css`: the styles behind the small pieces (`.mp-heading`, `.mp-sticker`, `.mp-notice`, `.mp-error-text`, `.mp-save-pill`, `.mp-save-alert`, `.mp-avatar-button`, `.mp-seg`, `.mp-recorder`, `.mp-medallion`).
 - `tokens/signs.css`: the styles behind the world signs (`.mp-gate`, `.mp-sign`, `.mp-world-pill`, `.mp-world-option`).
 - `tokens/media.css`: the styles behind the media components (`.mp-words`, `.mp-album`, `.mp-cassette`, `.mp-film`, `.mp-shimmer`). They use container queries, so each piece fits the box it sits in.
 - `tokens/worlds.css`, `tokens/gems.css`: world scopes and gem tones; iPad/phone layout tokens in `spacing.css`; memory/letter sizes in `typography.css`; focus ring + reduced motion in `utilities.css`; the night palette (`--night-*`, the summit letter and credits) and step-marker tokens (`--step-*`) in `colors.css`, with the `.mp-step` recipe in `utilities.css`.

package/tokens/ui.css

@@ -1,6 +1,6 @@
 /* Small interface pieces: a heading with its plate, a sticker, a notice and error text, the autosave pill and alert, an avatar
-   button with a pencil, segmented tabs, and the voice recorder card. Used by Heading, Sticker, Notice, ErrorText, SavePill,
-   SaveAlert, AvatarButton, SegmentedTabs and RecorderPanel. */
+   button with a pencil, segmented tabs, the voice recorder card and the portrait medallion. Used by Heading, Sticker, Notice,
+   ErrorText, SavePill, SaveAlert, AvatarButton, SegmentedTabs, RecorderPanel and PortraitMedallion. */
 
 /* The friend's avatar in the HUD, with a small pencil to say it can be changed. */
 .mp-avatar-button {
@@ -352,3 +352,81 @@
   background: var(--coral-500);
   animation: mp-sparkle 1.2s infinite;
 }
+
+/* ---------- Portrait medallion ---------- */
+
+/* The tappable wrapper: it takes the press, the hover and the keyboard focus for the medallion inside it. */
+.mp-medallion-button {
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Every tap answers back: the medallion presses down like a bevelled button. */
+.mp-medallion-button:hover .mp-medallion-ring {
+  filter: brightness(1.06);
+}
+
+.mp-medallion-button:active .mp-medallion-ring {
+  transform: translateY(5px);
+  box-shadow: 0 2px 0 var(--gold-900), 0 6px 10px oklch(0.2 0.05 60 / 0.3), inset 0 3px 0 oklch(1 0 0 / 0.6);
+}
+
+.mp-medallion-button:active .mp-medallion-number {
+  transform: translateY(4px);
+}
+
+.mp-medallion-button:focus-visible {
+  outline: 4px solid #fff;
+  outline-offset: 4px;
+  border-radius: 999px;
+}
+
+/* Set --m to the medallion's size. The shadow and the number plate stay the same at every size. */
+.mp-medallion {
+  position: relative;
+  display: inline-grid;
+  justify-items: center;
+  width: var(--m);
+}
+
+.mp-medallion-ring {
+  display: grid;
+  place-items: center;
+  width: var(--m);
+  height: var(--m);
+  border-radius: 50%;
+  background: radial-gradient(circle at 50% 30%, var(--gold-300), var(--gold-500) 60%, var(--gold-700));
+  box-shadow: 0 7px 0 var(--gold-900), 0 14px 18px oklch(0.2 0.05 60 / 0.35), inset 0 3px 0 oklch(1 0 0 / 0.6);
+  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast);
+}
+
+.mp-medallion-number {
+  margin-top: -14px;
+  min-width: 36px;
+  height: 30px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #fff, var(--cream-100));
+  box-shadow: 0 3px 0 var(--cream-300), 0 6px 10px oklch(0 0 0 / 0.2);
+  font-family: var(--font-display);
+  font-size: 17px;
+  line-height: 30px;
+  color: var(--ink-900);
+  text-align: center;
+  z-index: 1;
+  transition: transform var(--dur-fast) var(--ease-out);
+}
+
+.mp-medallion-pop {
+  animation: mp-medallion-pop 900ms var(--ease-out) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mp-medallion-pop {
+    animation: none;
+  }
+}

package/tokens/utilities.css

@@ -29,6 +29,12 @@
 .mp-step-done { --step-highlight: var(--step-done-highlight); --step-fill: var(--step-done-fill); --step-edge: var(--step-done-edge); --step-outline: var(--step-done-outline); }
 .mp-step-current { --step-highlight: var(--step-current-highlight); --step-fill: var(--step-current-fill); --step-edge: var(--step-current-edge); --step-outline: var(--step-current-outline); transform: translateY(-3px); }
 .mp-step-lg { width: 40px; height: 25px; font-size: 17px; transform: none; }
+/* StepBar's celebration: the fill grows, then the new marker pops. Classes, so reduced motion can switch them off (the rule below only shortens animations, and these wait before they start). */
+.mp-trail-fill-grow { animation: mp-trail-grow var(--dur-slow) var(--ease-out) 260ms both; }
+.mp-step-pop { animation: mp-pop var(--dur-slow) var(--ease-bounce) 560ms both; }
+@media (prefers-reduced-motion: reduce) { .mp-trail-fill-grow, .mp-step-pop { animation: none; } }
+/* RadioCard presses down like a bevelled button (CSS, so a key press does it too). */
+.mp-radio-card:active { transform: translateY(3px); }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
 }