// ForestLynk — pre-auth flow shared components.
// Phone bezel, Threshold mark, lockups, primitives.
// ─────────────────────────── Threshold mark ───────────────────────────
// 3 concentric canopy rings + amber Sunlight nucleus.
// Brief: this is the brand mark used in the hero lockup (small),
// not the big LogoMark with the dashed satellite tail (that's marketing).
function ThresholdMark({ size = 28, dim = false, pulse = false }) {
const ringColor = dim ? '#586552' : '#A8C5A0';
const id = React.useId();
return (
);
}
// "LogoWordmark" — Threshold mark + "FORESTLYNK" tracking-wide caps.
// Used in the hero lockup, above the lowercase 'forestlynk' h1.
function LogoWordmark({ scale = 1, color = '#F2EDE4' }) {
return (
FORESTLYNK
);
}
// Lowercase wordmark — 'forest' in fog, 'lynk' in canopy-300.
function ForestlynkH1({ size = 42 }) {
return (
forestlynk
);
}
// ─────────────────────────── Phone bezel ───────────────────────────
// Matches the bezel used across the ForestLynk mobile UI kit.
function Phone({ children, width = 390, height = 800, time = '9:41', label }) {
return (
{/* Dynamic island */}
{/* Inner screen */}
{/* Status bar */}
{time}
{/* App body */}
{children}
{/* Home indicator */}
);
}
// ─────────────────────────── Field primitive ───────────────────────────
// Used for both email and handle inputs. The hairline is the focus state;
// errors get a calm bark/danger 1.5px ring (never red-flashing).
function FLField({
value, onChange, placeholder, type = 'text', focused = false,
state = 'idle', // idle | invalid | checking | available | submitting
leadIcon, trailing, mono = false, readOnly = false, autoFocus = false,
ariaLabel,
}) {
const borderColor =
state === 'invalid' ? '#C66449' :
state === 'available'? '#76AB78' :
focused ? '#76AB78' :
'#2D3A22';
const ring =
state === 'invalid' ? '0 0 0 3px rgba(198,100,73,0.18)' :
state === 'available'? '0 0 0 3px rgba(118,171,120,0.18)' :
focused ? '0 0 0 3px rgba(118,171,120,0.18)' :
'none';
return (